Tired of dealing with complex notification packages or having to spend time building components just to render alerts or toast notificaitons in your React projects? Look no further! Here, I introduce react-next-toast
- Easy to use:
react-next-toast
was built with ease in mind - say goodbye to complex toast declarations - with react-next-toast you have a toast via a single function call. - Customizable: With our Four (4) different types of Toast Notifications - Success, Error, Warning and Info, you get a fine-tuned and different UI display for each which directly passes message from the choice of colour and design. It also provides option to choose duration of toasts, colours and fonts.
- Lightweight: Designed with performance in mind as well, the package is designed to lightweight in other to ensure it does not slow down your app's performance.
- Fully-typed:
react-next-toast
comes with TypeScript support out of the box to provide type safety and seamless renderings.
- Install the package into your project
npm install react-next-toast
- Import the
showToast
& use in your Component:
import { showToast } from 'react-next-toast';
const MyComponent = () => {
const handleClick = () => {
showToast.success('Log in successful')
}
return (
<div>
<h1>Hello Dev</h1>
<button onClick={handleClick}>Log in</button>
</div>
);
}
export default MyComponent;
You can customize the duration
of the Toast Notification by passing time in ms
as second parameter to the showToast
function.
The default is 5000
which is 5 seconds.
const handleClick = () => {
showToast.error('incorrect login details', 4000)
}
Project is OPEN SOURCE! Feel free to fork the repo and send a PR to contribute. I will be sure to merge if its a good piece. Thank you
NOTE: For more advanced customization, you can directly use the ToastNotification component and pass in the required props - duration, position, className.
Thank you for using `react-next-toast! ๐โค๏ธ If you experience any issue, have any questions or sugestions for improvement, feel free to raise an issue here on GitHub or reach out to me. Your feedback is very vital! โบ:)
Cheers to toasting to simpler and delightful notes! ๐ฅ