react-toast alternatives and similar libraries
Based on the "Notification" category.
Alternatively, view react-toast alternatives based on common mentions on social networks and blogs.
-
notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other -
react-notification-system
A complete and totally customizable component for notifications in React -
react-toast-notifications
๐ A toast notification system for react -
react-notifications-component
Delightful and highly customisable React Component to notify your users -
cogo-toast
Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons -
react-s-alert
Alerts / Notifications for React with rich configuration options. -
simple-react-notifications
Tiny React.js notification library (1kb gzip).
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
Do you think we are missing an alternative of react-toast or a related project?
README
React Toast
Minimal toast notifications for React.
Get started
Quick start
Install with yarn
yarn add react-toast
Install with NPM
npm install react-toast
import { 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 \ |
deplay (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 |
License
*Note that all licence references and agreements mentioned in the react-toast README section above
are relevant to that project's source code only.