Cogo Toast

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

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

[![Dependencies](https://img.shields.io/david/Cogoport/cogo-toast.svg)](https://david-dm.org/Cogoport/cogo-toast.svg) [![DevDependencies](https://img.shields.io/david/dev/Cogoport/cogo-toast.svg)](https://david-dm.org/Cogoport/cogo-toast?type=dev) [![npm package](https://img.shields.io/npm/v/cogo-toast/latest.svg)](https://www.npmjs.com/package/cogo-toast) [![Small size](https://img.badgesize.io/https://unpkg.com/cogo-toast/dist/index.js?compression=gzip)](https://unpkg.com/cogo-toast/dist/index.js) [![npm downloads](https://img.shields.io/npm/dm/cogo-toast.svg)](https://www.npmjs.com/package/cogo-toast) ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg) [![License](https://img.shields.io/npm/l/@xstyled/styled-components.svg)](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(

Awesome!

Isn't it?

, ); ``` ### 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) ### 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)):