React Toast

React Toast

Minimal toast notifications for React.

## Get started ### Quick start **Install with yarn** ```sh yarn add react-toast ``` **Install with NPM** ```sh npm install react-toast ``` ```jsx import { ToastContainer, toast } from 'react-toast' const App = () => { const wave = () => toast('Hi there 👋') return (

) } ``` ### Demo [Demo](https://codesandbox.io/s/byqvk) on CodeSandbox. ### Docs #### Toast Container To use `react-toast`, you need to put `ToastContainer` in a top-level component in your application. e.g. `App.js` It can take some props, here's a list of them: | Props | Type | Description | Default | | :------------ | :---------------------------------------------------------------------------------------------- | :---------------- | :------------ | | `position` | `top-left` \| `top-center` \| `top-right` \| `bottom-left` \| `bottom-center` \| `bottom-right` | position of toast | `bottom-left` | | `deplay` (ms) | `number` | delay for toast | `6000` | #### Toast There are 4 base toast type available, `success`, `error`, `info` and `warn`. For instance: ```js const success = () => toast.success('Message sent successfully!') ``` or ```js fetch('someRandomUrl') .then(res => res.json()) .then(res => console.log(res)) .catch(err => toast.error(err.message)) ``` **Custom toast** You can display custom styled toasts, here's an example and a list of options that are available for customization: ```js const customToast = () => toast('Morning! Have a good day.', { backgroundColor: '#8329C5', color: '#ffffff', }) ``` | Property | Type | Description | Default | | :---------------- | :------- | :------------------------ | :------------------------------------------------ | | `backgroundColor` | `string` | background color of toast | based on toast type, e.g. `success` will be green | | `color` | `string` | color of text in toast | `#ffffff` | ## License [MIT](https://github.com/moharnadreza/react-toast/blob/develop/LICENSE)

	Stars	Issues	Version	Updated	Created
react-hot-toast	9,682	145	2.4.1	a year ago	4 years ago
react-toast	73	2	1.0.3	3 years ago	9 years ago
react-toast-notifications	2,170	30	2.5.1	3 years ago	6 years ago
react-toastify	12,554	146	10.0.5	6 months ago	8 years ago

react-hot-toast vs react-toast vs react-toast-notifications vs react-toastify

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past