Cogo Toast
Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons)
https://cogoport.github.io/cogo-toast/
[](https://david-dm.org/Cogoport/cogo-toast.svg)
[](https://www.npmjs.com/package/cogo-toast)
[](https://unpkg.com/cogo-toast/dist/index.js)
[](https://www.npmjs.com/package/cogo-toast)
[](https://github.com/Cogoport/cogo-toast/blob/master/LICENSE)
### Install via NPM:
```bash
npm install --save cogo-toast
```
### Install via Yarn:
```bash
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.
```bash
yarn add cogo-toast@2.0.1
```
## Usage
Its Plug and Play. No configuration required. Just import and you are good to go.
```javascript
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.
```javascript
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
```javascript
cogoToast.info(
,
);
```
### 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.
```javascript
cogoToast.loading('Loading your data...').then(() => {
cogoToast.success('Data Successfully Loaded');
});
```
### Hide on Click
```javascript
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.
```javascript
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` |
### Custom Styling
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](/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;
}
```
### Only ~ 4kb gzip (with Styles and Icons)
The package contains the minified build file, along with the SVG Icons and the Styles, built into the Code, with a total of only ~4kb gzip.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
