A configurable, composable, toast notification system for react.
yarn add react-toast-notifications
Wrap your app in the ToastProvider
, which provides context for the Toast
descendants.
import { ToastProvider, useToasts } from 'react-toast-notifications'
const FormWithToasts = () => {
const { addToast } = useToasts()
const onSubmit = async value => {
const { error } = await dataPersistenceLayer(value)
if (error) {
addToast(error.message, { appearance: 'error' })
} else {
addToast('Saved Successfully', { appearance: 'success' })
}
}
return <form onSubmit={onSubmit}>...</form>
}
const App = () => (
<ToastProvider>
<FormWithToasts />
</ToastProvider>
)
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. |
Property | Description |
---|---|
appearance | Required. One of success , error , warning , info |
children | Required. The content of the toast notification. |
autoDismiss boolean |
Default: false . Whether or not to dismiss the toast automatically after a timeout. Inherited from ToastProvider if not provided. |
autoDismissTimeout number |
Inherited from ToastProvider . |
onDismiss: Id => void |
Passed in dynamically. |
placement PlacementType |
Inherited from ToastProvider . |
transitionDuration number |
Inherited from ToastProvider . |
transitionState: TransitionState |
Passed in dynamically. |
The useToast
hook has the following signature:
const { addToast, removeToast, removeAllToasts, updateToast, toastStack } = useToasts();
The addToast
method has three arguments:
Node
.Options
object, which can take any shape you like. Options.appearance
is required when using the DefaultToast
. When departing from the default shape, you must provide an alternative, compliant Toast
component.ID
.The removeToast
method has two arguments:
ID
of the toast to remove.The removeAllToasts
method has no arguments.
The updateToast
method has three arguments:
ID
of the toast to update.Options
object, which differs slightly from the add method because it accepts a content
property.ID
.The toastStack
is an array of objects representing the current toasts, e.g.
[
{ content: 'Something went wrong', id: 'generated-string', appearance: 'error' },
{ content: 'Item saved', id: 'generated-string', appearance: 'success' }
]
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>
);
To customize the existing component instead of creating a new one, you may import DefaultToast
:
import { DefaultToast } from 'react-toast-notifications';
export const MyCustomToast = ({ children, ...props }) => (
<DefaultToast {...props}>
<SomethingSpecial>{children}</SomethingSpecial>
</DefaultToast>
);
Author: jossmac
Official Website: https://github.com/jossmac/react-toast-notifications
#reactjs #javascript