Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fkhadra/react-toastify
React notification made easy π !
https://github.com/fkhadra/react-toastify
javascript notification react react-component reactjs snackbar toast
Last synced: 3 days ago
JSON representation
React notification made easy π !
- Host: GitHub
- URL: https://github.com/fkhadra/react-toastify
- Owner: fkhadra
- License: mit
- Created: 2016-11-08T12:32:52.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-05-20T15:53:27.000Z (7 months ago)
- Last Synced: 2024-05-22T14:24:46.851Z (7 months ago)
- Topics: javascript, notification, react, react-component, reactjs, snackbar, toast
- Language: TypeScript
- Homepage: https://fkhadra.github.io/react-toastify/introduction
- Size: 14.8 MB
- Stars: 12,238
- Watchers: 49
- Forks: 671
- Open Issues: 117
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - fkhadra/react-toastify - React notification made easy π ! (TypeScript)
- awesome-react-components - react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. (UI Components / Notification)
- awesome-web-cn - react-toastify - δΈδΈͺ React ηζΆζ―ιη₯η»δ»Ά (Uncategorized / Uncategorized)
- awesome-react-components - react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. (UI Components / Notification)
- awesome-react-components - react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. (UI Components / Notification)
- awesome-web-react - React-Toastify - React-Toastify allows you to add notifications to your app with ease. (UI)
- awesome-list - react-toastify
- awesome-react-components - react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. (UI Components / Notification)
- best-of-react - GitHub - 14% open Β· β±οΈ 15.05.2024): (Notifications)
- fucking-awesome-react-components - react-toastify - π [demo](fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. (UI Components / Notification)
- StarryDivineSky - fkhadra/react-toastify
- awesome - fkhadra/react-toastify - React notification made easy π ! (TypeScript)
- awesome-react - react-toastify - π React-Toastify allows you to add notifications to your app with ease. No more nonsense. ![](https://img.shields.io/github/stars/fkhadra/react-toastify.svg?style=social&label=Star) (UI Components / Notification)
- Awesome-JavaScript-Libraries - **React-Toastify** - Toastify allows you to add notifications to your app with ease. | React | (UI Components / Notification, Snackbar and Toast)
README
# React-Toastify
[![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)
![npm](https://img.shields.io/npm/dm/react-toastify.svg?label=%E2%8F%ACdownloads&style=for-the-badge)
![npm](https://img.shields.io/npm/v/react-toastify.svg?style=for-the-badge)
![NPM](https://img.shields.io/npm/l/react-toastify.svg?label=%F0%9F%93%9Clicense&style=for-the-badge)
![Coveralls github](https://img.shields.io/coveralls/github/fkhadra/react-toastify.svg?label=%E2%9B%B1coverage&style=for-the-badge)![React toastify](https://user-images.githubusercontent.com/5574267/130804494-a9d2d69c-f170-4576-b2e1-0bb7f13dd92d.gif "React toastify")
![stacked](https://github.com/fkhadra/react-toastify/assets/5574267/975c7c01-b95e-43cf-9100-256fa8ef2760)
π 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 π
- Pause timer programmaticaly
- Stacked notifications!
- And much more !## The gist
```jsx
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 (
Notify!
);
}
```## Demo
[A demo is worth a thousand words](https://fkhadra.github.io/react-toastify/introduction)
## Documentation
Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) 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](https://www.reactiflux.com/). My pseudo is Fadi.
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-toastify/contribute)]
#### Individuals
#### Organizations
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)]
## Release Notes
You can find the release note for the latest release [here](https://github.com/fkhadra/react-toastify/releases/latest)
You can browse them all [here](https://github.com/fkhadra/react-toastify/releases)
## License
Licensed under MIT