1 | # React-Toastify
|
2 |
|
3 | [![Financial Contributors on Open Collective](https://opencollective.com/react-toastify/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-toastify) ![React-toastify CI](https://github.com/fkhadra/react-toastify/workflows/React-toastify%20CI/badge.svg)
|
4 | ![npm](https://img.shields.io/npm/dm/react-toastify.svg?label=%E2%8F%ACdownloads&style=for-the-badge)
|
5 | ![npm](https://img.shields.io/npm/v/react-toastify.svg?style=for-the-badge)
|
6 | ![NPM](https://img.shields.io/npm/l/react-toastify.svg?label=%F0%9F%93%9Clicense&style=for-the-badge)
|
7 | ![Coveralls github](https://img.shields.io/coveralls/github/fkhadra/react-toastify.svg?label=%E2%9B%B1coverage&style=for-the-badge)
|
8 |
|
9 |
|
10 | ![React toastify](https://user-images.githubusercontent.com/5574267/130804494-a9d2d69c-f170-4576-b2e1-0bb7f13dd92d.gif "React toastify")
|
11 |
|
12 |
|
13 | 🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!
|
14 |
|
15 | ## Installation
|
16 |
|
17 | ```
|
18 | $ npm install --save react-toastify
|
19 | $ yarn add react-toastify
|
20 | ```
|
21 |
|
22 | ## Features
|
23 |
|
24 | - Easy to set up for real, you can make it work in less than 10sec!
|
25 | - Super easy to customize
|
26 | - RTL support
|
27 | - Swipe to close 👌
|
28 | - Can choose swipe direction
|
29 | - Super easy to use an animation of your choice. Works well with animate.css for example
|
30 | - Can display a react component inside the toast!
|
31 | - Has ```onOpen``` and ```onClose``` hooks. Both can access the props passed to the react component rendered inside the toast
|
32 | - Can remove a toast programmatically
|
33 | - Define behavior per toast
|
34 | - Pause toast when the window loses focus 👁
|
35 | - Fancy progress bar to display the remaining time
|
36 | - Possibility to update a toast
|
37 | - You can control the progress bar a la `nprogress` 😲
|
38 | - You can limit the number of toast displayed at the same time
|
39 | - Dark mode 🌒
|
40 | - And much more !
|
41 |
|
42 | ## The gist
|
43 |
|
44 | ```jsx
|
45 | import React from 'react';
|
46 |
|
47 | import { ToastContainer, toast } from 'react-toastify';
|
48 | import 'react-toastify/dist/ReactToastify.css';
|
49 |
|
50 | function App(){
|
51 | const notify = () => toast("Wow so easy!");
|
52 |
|
53 | return (
|
54 | <div>
|
55 | <button onClick={notify}>Notify!</button>
|
56 | <ToastContainer />
|
57 | </div>
|
58 | );
|
59 | }
|
60 | ```
|
61 |
|
62 | ## Demo
|
63 |
|
64 | [A demo is worth a thousand words](https://fkhadra.github.io/react-toastify/introduction)
|
65 |
|
66 | ## Documentation
|
67 |
|
68 | Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started!
|
69 |
|
70 | ## Contribute
|
71 |
|
72 | Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
|
73 |
|
74 | You can also find me on [reactiflux](https://www.reactiflux.com/). My pseudo is Fadi.
|
75 |
|
76 | ## Contributors
|
77 |
|
78 | ### Code Contributors
|
79 |
|
80 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
81 | <a href="https://github.com/fkhadra/react-toastify/graphs/contributors"><img src="https://opencollective.com/react-toastify/contributors.svg?width=890&button=false" /></a>
|
82 |
|
83 | ### Financial Contributors
|
84 |
|
85 | Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-toastify/contribute)]
|
86 |
|
87 | #### Individuals
|
88 |
|
89 | <a href="https://opencollective.com/react-toastify"><img src="https://opencollective.com/react-toastify/individuals.svg?width=890"></a>
|
90 |
|
91 | #### Organizations
|
92 |
|
93 | Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/react-toastify/contribute)]
|
94 |
|
95 | <a href="https://opencollective.com/react-toastify/organization/0/website"><img src="https://opencollective.com/react-toastify/organization/0/avatar.svg"></a>
|
96 | <a href="https://opencollective.com/react-toastify/organization/1/website"><img src="https://opencollective.com/react-toastify/organization/1/avatar.svg"></a>
|
97 | <a href="https://opencollective.com/react-toastify/organization/2/website"><img src="https://opencollective.com/react-toastify/organization/2/avatar.svg"></a>
|
98 | <a href="https://opencollective.com/react-toastify/organization/3/website"><img src="https://opencollective.com/react-toastify/organization/3/avatar.svg"></a>
|
99 | <a href="https://opencollective.com/react-toastify/organization/4/website"><img src="https://opencollective.com/react-toastify/organization/4/avatar.svg"></a>
|
100 | <a href="https://opencollective.com/react-toastify/organization/5/website"><img src="https://opencollective.com/react-toastify/organization/5/avatar.svg"></a>
|
101 | <a href="https://opencollective.com/react-toastify/organization/6/website"><img src="https://opencollective.com/react-toastify/organization/6/avatar.svg"></a>
|
102 | <a href="https://opencollective.com/react-toastify/organization/7/website"><img src="https://opencollective.com/react-toastify/organization/7/avatar.svg"></a>
|
103 | <a href="https://opencollective.com/react-toastify/organization/8/website"><img src="https://opencollective.com/react-toastify/organization/8/avatar.svg"></a>
|
104 | <a href="https://opencollective.com/react-toastify/organization/9/website"><img src="https://opencollective.com/react-toastify/organization/9/avatar.svg"></a>
|
105 |
|
106 | ## Release Notes
|
107 |
|
108 | You can find the release note for the latest release [here](https://github.com/fkhadra/react-toastify/releases/latest)
|
109 |
|
110 | You can browse them all [here](https://github.com/fkhadra/react-toastify/releases)
|
111 |
|
112 | ## License
|
113 |
|
114 | Licensed under MIT
|