tabrez96 / cogo-toast

Beautiful, Zero Configuration, Toast Messages - Built with React

Cogo Toast

Beautiful, Zero Configuration, Toast Messages

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

Get Started

Install via NPM:

npm install --save cogo-toast

Install via Yarn:

yarn add cogo-toast

Usage

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

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.

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');

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.

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

When hideAfter = 0, It returns a callback function that hides the toast, instead of a promise.

Completely Customizable

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

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.5 (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	''
icon	ReactNode	Icon Based on the Type
bar	Object { size: '2px', style: 'solid/dashed/dotted', color: '#hex' }	Based on the Type
onClick	Function	null

Only ~ 3.5K Gzipped

The package contains one single minified build file, and its all inclusive!

The SVG Icons and the Styles are packed along built into the Code.

License

MIT

Built With

• React

Author

• Anmol Mahatpurkar, Cogoport

Made with ♥ at Cogoport

Looking for Contributors

Looking for contributors to make it more awesome!