React Toast
Minimal toast notifications for React.
Get started
Quick start
Install with yarn
yarn add react-toastInstall with NPM
npm install react-toastimport { ToastContainer, toast } from 'react-toast'
const App = () => {
const wave = () => toast('Hi there 👋')
return (
<div>
<button onClick={wave}>Say hi!</button>
<ToastContainer />
</div>
)
}Demo
Demo on CodeSandbox.
Docs
Toast Container
To use react-toast, you need to put ToastContainer in a top-level component in your application. e.g. App.js
It can take some props, here's a list of them:
| Props | Type | Description | Default |
|---|---|---|---|
position |
top-left | top-center | top-right | bottom-left | bottom-center | bottom-right |
position of toast | bottom-left |
delay (ms) |
number |
delay for toast | 6000 |
Toast
There are 4 base toast type available, success, error, info and warn. For instance:
const success = () => toast.success('Message sent successfully!')or
fetch('someRandomUrl')
.then(res => res.json())
.then(res => console.log(res))
.catch(err => toast.error(err.message))Custom toast
You can display custom styled toasts, here's an example and a list of options that are available for customization:
const customToast = () =>
toast('Morning! Have a good day.', {
backgroundColor: '#8329C5',
color: '#ffffff',
})| Property | Type | Description | Default |
|---|---|---|---|
backgroundColor |
string |
background color of toast | based on toast type, e.g. success will be green |
color |
string |
color of text in toast | #ffffff |