React Toast Notifications
A configurable, composable, toast notification system for react.
https://jossmac.github.io/react-toast-notifications
Install
yarn add react-toast-notifications
Use
Wrap your app in the ToastProvider
, which provides context for the Toast
descendants.
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>
);
ToastProvider Props
For brevity:
PlacementType
is equal to'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'
.TransitionState
is equal to'entering' | 'entered' | 'exiting' | 'exited'
.
Property | Description |
---|---|
autoDismissTimeout number |
Default 5000 . The time until a toast will be dismissed automatically, in milliseconds. |
children Node |
Required. Your app content. |
components { ToastContainer, Toast } |
Replace the underlying components. |
placement PlacementType |
Default top-right . Where, in relation to the viewport, to place the toasts. |
transitionDuration number |
Default 220 . The duration of the CSS transition on the Toast component. |
Toast Props
Property | Description |
---|---|
children | Required. The content of the toast notification. |
autoDismiss boolean |
Whether or not to dismiss the toast automatically after a timeout. |
autoDismissTimeout number |
Inherited from ToastProvider . |
onDismiss: Event => any |
Passed in dynamically. |
placement PlacementType |
Inherited from ToastProvider . |
transitionDuration number |
Inherited from ToastProvider . |
transitionState: TransitionState |
Passed in dynamically. |
Add & Remove
The add
and remove
methods on ToastManager
have three arguments.
- The first is the content of the toast, which can be any renderable
Node
. - The second is the
Options
object, which can take any shape you like. When departing from the default shape, you must provide an alternative, compliantToast
component. - The third is a callback, which is passed the added or removed toast
ID
.
Replaceable Components
To bring each toast notification inline with your app, you can provide alternative components to the 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>
);
Alternatives
This library may not meet your needs. Here are some alternative I came across whilst searching for this solution: