Skip to content

fkhadra/react-toastify

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 29, 2022 14:28
March 21, 2023 19:49
src
May 14, 2023 20:52
November 1, 2022 12:44
March 6, 2022 21:09
March 6, 2022 21:09
December 7, 2018 09:06
March 21, 2023 20:08
August 26, 2021 22:41
March 6, 2022 21:09
May 14, 2023 20:52
March 6, 2022 21:09
May 14, 2023 20:52

React-Toastify

Financial Contributors on Open Collective React-toastify CI npm npm NPM Coveralls github

React toastify

πŸŽ‰ React-Toastify allows you to add notifications to your app with ease. No more nonsense!

Installation

$ npm install --save react-toastify
$ yarn add react-toastify

Features

  • Easy to set up for real, you can make it work in less than 10sec!
  • Super easy to customize
  • RTL support
  • Swipe to close πŸ‘Œ
  • Can choose swipe direction
  • Super easy to use an animation of your choice. Works well with animate.css for example
  • Can display a react component inside the toast!
  • Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toast
  • Can remove a toast programmatically
  • Define behavior per toast
  • Pause toast when the window loses focus πŸ‘
  • Fancy progress bar to display the remaining time
  • Possibility to update a toast
  • You can control the progress bar a la nprogress 😲
  • You can limit the number of toast displayed at the same time
  • Dark mode πŸŒ’
  • And much more !

The gist

  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

Demo

A demo is worth a thousand words

Documentation

Check the documentation to get you started!

Contribute

Show your ❀️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.

You can also find me on reactiflux. My pseudo is Fadi.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

Licensed under MIT