Toastify React

Beautiful, Zero Configuration, Toast Messages for React ~3kb gzip (with styles and icons)

https://hannadrehman.github.io/toastify-react/

!npm
!Code style

Toastify React

$3

``bash
npm install --save toastify-react
`

$3

`bash
yarn add toastify-react
`

Usage

Its Plug and Play. No configuration required. Just import and you are good to go.

`javascript
import toaster from 'toastify-react';

toaster.success('This is a success message!');
`

$3

There are 5 built-in types to handle the most common cases in any application.

`javascript
toaster.success('This is a success message');

toaster.info('This is a info message');

toaster.loading('This is a loading message');

toaster.warn('This is a warn message');

toaster.error('This is a error message');
`

$3

toastify-react is built using React. Which means any valid jsx can be used as the message in toaster

`javascript
toaster.info(


`javascript
toaster.loading('Loading your data...').then(() => {
toaster.success('Data Successfully Loaded');
});
`

$3

`javascript
const { hide } = toaster.success('This is a success message.', {
onClick: () => {
hide();
},
});
`

$3

The second parameter to the function is an options object that can be passed in for customization.

`javascript
toaster.info('This is an info message', options);
`

#### All Available Options

Here's a list of all the available options, to customize the toast to your needs.

| Options | Type | Default |
| :--------------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------------------: |
| hideAfter | Number in Seconds | 3
(Can be 0 to disable auto-hiding of the toast) |
| position | 'top-left', 'top-center', 'top-right',
'bottom-left', 'bottom-center', 'bottom-right' | 'top-center' |
| heading | String | '' |
| renderIcon | Function | Icon Based on the Type |
| bar | Object
{ size: '2px', style: 'solid/dashed/dotted', color: '#hex' } | Based on the Type |
| onClick() | Function | null |
| role | aria-role | status |
| toastContainerID | The dom element in which the toast container is added | ct-container |

$3

You can provide your own custom styling by extending the ct-toast class in your css styles.

For all classnames, refer to /src/styles/styles.css

#### Customize each type of Toast seperately

Customize each type of Toast seperately, by extending the ct-toast- class. For example, in your CSS,

`
ct-toast-success {
color: #FFFFFF;
background: #6EC05F;
}
`

$3

The package contains the minified build file, along with the SVG Icons and the Styles, built into the Code, with a total of only ~3kb gzip.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Anmol Mahatpurkar 💻 🎨 📖

Balázs Orbán 💻

Vitalii Kalchuk 💻

Amar Pathak 📖

Nataly Shrits 💻

hannad rehman 💻

Kartik Hedau 💻 🖋 🎨 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

How to run locally

`
yarn setup
yarn dev // runs rullup in watch mode
yarn dev:docs // runs docs website in dev mode.
``