UNPKG

5.28 kBMarkdownView Raw
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
68Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started!
69
70## Contribute
71
72Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
73
74You can also find me on [reactiflux](https://www.reactiflux.com/). My pseudo is Fadi.
75
76## Contributors
77
78### Code Contributors
79
80This 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
85Become 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
93Support 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
108You can find the release note for the latest release [here](https://github.com/fkhadra/react-toastify/releases/latest)
109
110You can browse them all [here](https://github.com/fkhadra/react-toastify/releases)
111
112## License
113
114Licensed under MIT