import { ToastConsumer, ToastProvider, withToastManager } from 'react-toast-notifications';
import validate from 'some-validation-lib';

class FormComponent extends React.Component {
  onSubmit = (value) => {
    const { toastManager } = this.props;
    const { error, success } = validate(value);

    if (error) {
      toastManager.add(`Something went wrong: "${error.message}"`, {
        appearance: 'error',
      });
    } else if (success) {
      toastManager.add('Saved Successfully', { appearance: 'success' });
    }
  };
  render() {
    return <form onSubmit={this.onSubmit}>...</form>;
  }
}

// wrap your component to pass in the `toastManager` prop
const FormWithToasts = withToastManager(FormComponent);

const App = () => (
  <ToastProvider>
    <FormWithToasts />

    {/* or if render props are more your speed */}
    <ToastConsumer>
      {({ add }) => (
        <button onClick={(e) => add(`Notified by ${e.target}`)}>
          Toasty
        </button>
      )}
    </ToastConsumer>
  </ToastProvider>
);

import { ToastProvider } from 'react-toast-notifications';

const MyCustomToast = ({ appearance, children }) => (
  <div style={{ background: appearance === 'error' ? 'red' : 'green'}}>
    {children}
  </div>
);

const App = () => (
  <ToastProvider components={{ Toast: MyCustomToast }}>
    ...
  </ToastProvider>
);