Cogo Toast

Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, w...

Cogoport/cogo-toast cogoport.github.io/cogo-toast cogo-toast

README

Cogo Toast

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

https://cogoport.github.io/cogo-toast/

Install via NPM:

``` sh
npm install --save cogo-toast
```

Install via Yarn:

``` sh
yarn add cogo-toast
```

Note:

The latest version ^3.0.0 makes the use of React Hooks internally.

To use this package in projects that don't support hooks, use v2.0.1 instead.

``` sh
yarn add cogo-toast@2.0.1
```

Usage

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

``` js
import cogoToast from 'cogo-toast';
cogoToast.success('This is a success message!');
```

5 Built in Types

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

``` js
cogoToast.success('This is a success message');
cogoToast.info('This is a info message');
cogoToast.loading('This is a loading message');
cogoToast.warn('This is a warn message');
cogoToast.error('This is a error message');
```

Use JSX

cogoToast is built using React. Which means any valid jsx can be used as the message in cogoToast

``` js
cogoToast.info(
<div>
<b>Awesome!</b>
<div>Isn't it?</div>
</div>,
);
```

Returns a Promise

Returns a promise which resolves when the toast is about to hide.

This can be useful to do some action when the toast has completed showing.

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

Hide on Click

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

Completely Customizable

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

``` js
cogoToast.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 |