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]

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!