Support multiple nested Contexts

[jesstelford]

NOTE: PR best viewed with whitespace changes hidden

From the updated docs:

Displaying individual toasts differently is done using nested <ToastProvider>s.

For example, the docs page displays both "notification" style & "snack bar" style toasts simultaneously on the same page.

Nested Providers must be given a unique name prop, which is then also passed to the <ToastConsumer> component or useToasts() hook.

import { ToastProvider, ToastConsumer } from 'react-toast-notifications';
const App = () => (
  <ToastProvider>
    <ToastProvider name="snack">
      <ToastConsumer>
        {({ add }) => <button onClick={() => add('A toast')}>Add Toast</button>}
      </ToastConsumer>
      <ToastConsumer name="snack">
        {({ add }) => <button onClick={() => add('A snack')}>Add Snack</button>}
      </ToastConsumer>
    </ToastProvider>
  </ToastProvider>
);

[jesstelford]

These id changes fix some flow errors I was getting.

[jesstelford]

We only create a new context if there isn't already one for that name.

Then we continue using the created context within this component for its lifetime.

[jesstelford]

Each of the 3 ways of consuming toast context (<ToastConsumer>, withToastManager(), and useToasts()) now all accept an optional name prop.

That name is used to lookup a context created by a provider.

If the named context isn't known, then an error is thrown. Otherwise, that named context is the one used for the life of the component.

In this way, any deeply nested consumers can connect to any parent provider no matter how many they are as long as they have unique names.

[jesstelford]

This fixes a flow issue I was having where it thought id was optional on internal state.

[jesstelford]

I've published the changes in this PR as @jesstelford/[email protected] to try it out:

yarn add @jesstelford/[email protected]

[soosap]

I have tested the PR by @jesstelford! It works like a charm thank you. Please merge!