13.4K ·GitHub
What is this?
React-Toastify is a React library that lets you add notification toasts to your app with minimal setup.
React-Toastify is a React library that lets you add notification toasts to your app with minimal setup.Is it a UI library or a full framework?It is a lightweight React component library focused solely on toast notifications, not a full UI framework.
It is a lightweight React component library focused solely on toast notifications, not a full UI framework.How do I add it to a project?Install it via npm/pnpm/yarn as a dependency, import the ToastContainer and css, then call the toast function to trigger notifications; the README says you can get it working in under 10 seconds.
Install it via npm/pnpm/yarn as a dependency, import the ToastContainer and css, then call the toast function to trigger notifications; the README says you can get it working in under 10 seconds.Do I need any extra libraries to use it?It only needs 'clsx' as a runtime dependency; it works out of the box but can optionally pair with animation libraries like animate.css.
It only needs 'clsx' as a runtime dependency; it works out of the box but can optionally pair with animation libraries like animate.css.Is custom animation support mandatory to set up?No, custom animations are optional — the library ships with its own defaults and lets you plug in any animation library if you want.
No, custom animations are optional — the library ships with its own defaults and lets you plug in any animation library if you want.Can I render a custom React component inside a toast?Yes, the library lets you display a full React component inside the toast, with hooks that can access the props passed to it.
Yes, the library lets you display a full React component inside the toast, with hooks that can access the props passed to it.Does it support swipe gestures and RTL layouts?Yes, it includes swipe-to-close with a configurable direction and built-in RTL (right-to-left) support.
Yes, it includes swipe-to-close with a configurable direction and built-in RTL (right-to-left) support.Can I control or update toasts after they are shown?Yes, you can update a toast programmatically, remove it, pause its timer, control its progress bar like nprogress, and limit how many toasts show at once.
Yes, you can update a toast programmatically, remove it, pause its timer, control its progress bar like nprogress, and limit how many toasts show at once.Does it support dark mode and stacked notifications?Yes, it has a built-in dark mode and supports stacked notifications along with a progress bar showing remaining time.
Yes, it has a built-in dark mode and supports stacked notifications along with a progress bar showing remaining time.What are similar projects?sonner, rare-ui, react-transition-group, react-hot-toast, sweetalert2, swiper, drawably, react-select
sonner, rare-ui, react-transition-group, react-hot-toast, sweetalert2, swiper, drawably, react-selectWhich topics is it in?react-component, toast, reactjs, ui-components, animation, css, react, npm, frontend, library, typescript, javascript
react-component, toast, reactjs, ui-components, animation, css, react, npm, frontend, library, typescript, javascript