gitmyhub

react-toastify

TypeScript ★ 13k updated 2mo ago

React notification made easy 🚀 !

A React library for adding toast notifications, brief pop-up messages that slide onto the screen and auto-dismiss after a few seconds, with one npm install and two lines of code.

TypeScriptReactJavaScriptsetup: easycomplexity 2/5

React-Toastify is a library for React, the popular JavaScript tool for building web interfaces. Its job is to show toast notifications: those brief pop-up messages that slide into a corner of the screen to inform the user that something happened, like "changes saved" or "file uploaded," then disappear on their own after a few seconds. The name comes from the visual resemblance to a piece of toast popping up.

The README emphasizes how little work it takes to add. You install the package with one npm or yarn command, drop a single container component somewhere in your app's layout, and then call the toast function wherever you want a notification to appear. The minimal example in the README is a button that, when clicked, shows the message "Wow so easy!"

Beyond the basics, the README lists a long set of features. Notifications can be customized in color, style, and animation. There is right-to-left text support for languages like Arabic. Users can swipe a toast away, and you can control which direction the swipe goes. You can show a full React component inside a toast, not just plain text. Callbacks fire when a toast opens or closes. You can remove or update a toast from code, limit how many appear at once, and stack multiple notifications neatly on top of each other.

Smaller details include a progress bar that shows how much time remains before a toast auto-dismisses, the option to pause that timer when the browser window loses focus or programmatically, and a dark mode. A live demo and full documentation are linked from the README.

The project is supported by code contributors and financial backers through Open Collective. It is licensed under MIT, which means free to use in commercial projects. Release notes for each version are available on the GitHub releases page.

Where it fits