react-toast
A built-in global-state-management toast notification for React
Just write the message, show the toast!
Installation
npm i @dalgu/react-toastyarn add @dalgu/react-toastUsage
API
react-toast includes a <ToastProvider /> component, which makes the toast available everywhere of your app when you need notification for user.
import { ToastProvider } from '@dalgu/react-toast';
ReactDOM.render(
<ToastProvider>
<App />
</ToastProvider>,
document.getElementById('root')
);Hooks
react-toast provides a custom React hooks useToast that allow the toast notification to show to the user.
import { useToast } from '@dalgu/react-toast';
const App = () => {
const { showToast } = useToast();
return (
<>
<button onClick={() => showToast("I'm React Toast!")}>showToast</button>
</>
);
};Options as props
| prop | type | default | description |
|---|---|---|---|
duration |
number? |
2 | Time showing the toast in second |
zIndex |
number? |
100000 | Set the CSS property z-index |
You can use the Options as props like the below example. All Options as props are optional props. I will add more props Options as props in the future.
import { ToastProvider } from '@dalgu/react-toast';
ReactDOM.render(
<ToastProvider duration={3} zIndex={100}>
<App />
</ToastProvider>,
document.getElementById('root')
);Features
Built-in global-state-management
Easy to use
Multiple toast notifications
Available on desktop, tablet, mobile
Ready for iOS safe area
New features scheduled to update
Customizable style
Customizable motion
Customizable position
Multiple toast notifications Completed on 2021.12.05, Improved on 2022.01.15
add test
...more new features!
Version history
1.2.0
2022.01.15
Improve multiple toast notifications
1.1.0
2021.12.05
Multiple toast notifications
1.0.0
2021.11.21
Built-in global-state-management
Available in both JavaScript and TypeScript
Available on desktop, tablet, mobile
Ready for iOS safe area
Motivation
As a digital product designer, I think the toast notification is essential for interaction with users in a digital product. The toast is a good way to send feedback to user's actions. In other words, the toast is a good way to interact with a user. So I frequently use the toast in my product for interaction with users.
But the toast is challenging to develop. The primary reason is global-state-management. Global-state-management is needed because the toast should be used anywhere in a digital product. It is also necessary to continuously show the toast even if the page changes for building a modern web application, just like a mobile native app.
react-toast is the result of thinking. With react-toast, you don't have to worry about state management of the toast notification. Just write the message, show the toast!