Guide · Open source
How to use react-toastify: install, show toasts and customize
Updated · written with AI from the project's own documentation and checked against our catalogue data
React-Toastify is a JavaScript library for React apps that shows small, temporary notification messages called toasts. This guide is for React developers who want quick on-screen feedback such as confirmations or errors. By the end you will be able to install the library, display a toast from a button click, and know which options the README says you can customize.
React-Toastifyfkhadra/react-toastify · ★ 13.4k · MIT Install options & downloads Quick start
- 1Install the package. Run npm install --save react-toastify or yarn add react-toastify in your project.
- 2Import the components. Import ToastContainer and toast from 'react-toastify' in the component that needs notifications.
- 3Render ToastContainer. Place the ToastContainer component once in your component tree.
- 4Call toast(). Call toast with a message from any event handler, such as a button click.
- 5Explore options. Read the documentation linked in the README to customize styling, animation, and behavior.
Install react-toastify with npm or yarn
React-Toastify is installed with a package manager. You need Node.js, npm or yarn, and React in your project.
- Install with npm: npm install --save react-toastify
- Install with yarn: yarn add react-toastify
$ npm install --save react-toastify
$ yarn add react-toastifyAdd ToastContainer and call toast() to show a message
Import ToastContainer and toast from react-toastify. Render ToastContainer once in your component tree, then call toast() from an event handler to display a message. The README example uses a button that calls toast("Wow so easy!") when clicked.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
function App(){
const notify = () => toast("Wow so easy!");
return (
<div>
<button onClick={notify}>Notify!</button>
<ToastContainer />
</div>
);
}Know the features the README lists
The README lists a set of features you can use after setup. The official documentation at the project homepage covers how to use them; this guide only lists what the README mentions.
- Customize styling and animation, including use with animate.css
- Swipe to close, and choose the swipe direction
- Right-to-left (RTL) support
- Pause a toast when the window loses focus, and pause the timer programmatically
- Progress bar showing remaining time
- Update a toast, or remove one programmatically
- Limit the number of toasts shown at the same time
- Stacked notifications and dark mode
- Display a React component inside a toast
- onOpen and onClose hooks
Where to find the full documentation
The README does not show every option in detail. For setup details and the API, use the documentation linked from the README, at https://fkhadra.github.io/react-toastify/introduction. The README also links a demo at the same address.
What people use it for
- Confirming that a form was saved after a button click
- Showing an error message without interrupting what the user is doing
- Displaying several stacked notifications at once, with a limit on how many appear
- Adding notifications to an app that needs right-to-left language support
- Customizing toast styling or animation to match your app's design
Frequently asked questions
How do I install react-toastify?
Run npm install --save react-toastify with npm, or yarn add react-toastify with yarn. The library is built for React, so your project also needs React and Node.js.
Is react-toastify free to use?
The repository is licensed under MIT, as stated in the README. Check the LICENSE file in the repository for the full licence text.
Does react-toastify work outside React?
No. The library is built for React, and the README shows only React usage. For non-React projects, look at a library made for your framework.
Why isn't my toast showing up?
The README example renders ToastContainer in the same component tree as the button that calls toast(). Check that ToastContainer is rendered once in your app. The README does not list other troubleshooting steps.
Can react-toastify support right-to-left languages?
Yes. The README lists RTL support as a feature.
How does react-toastify compare to alternatives like react-hot-toast or sonner?
Comparable projects mentioned in this directory include react-hot-toast, notistack, sonner, and react-notifications-component. The README does not compare them, so check each project's documentation to decide which fits your needs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
React-Toastify suits React developers who need simple, stacked, customizable notifications and RTL support, installed through npm or yarn. It is not a fit for non-React projects or for anyone who needs a finished app rather than a code library. If you need complex built-in workflows beyond what the README describes, compare it with the alternatives listed here.
Install options & downloads