Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Cogoport/cogo-toast

Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons
https://github.com/Cogoport/cogo-toast

cogo-toast messages notifications react react-toast toast toast-message toast-messages

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/Cogoport/cogo-toast
Owner: Cogoport
License: mit
Archived: true
Fork: true (tabrez96/cogo-toast)
Created: 2018-09-30T11:38:49.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2022-12-07T08:40:12.000Z (about 2 years ago)
Last Synced: 2024-10-11T19:09:14.068Z (2 months ago)
Topics: cogo-toast, messages, notifications, react, react-toast, toast, toast-message, toast-messages
Language: TypeScript
Homepage: https://cogoport.github.io/cogo-toast
Size: 10.6 MB
Stars: 673
Watchers: 10
Forks: 1
Open Issues: 21
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-react-components - cogo-toast - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, Promise support, inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_ (UI Components / Notification)
awesome-react - cogo-toast - Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons) ![](https://img.shields.io/github/stars/Cogoport/cogo-toast.svg?style=social&label=Star) (UI Components / Notification)
awesome-react-components - cogo-toast - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, toast messages, with promise support and inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_ (UI Components / Notification)
awesome-star-libs - Cogoport / cogo-toast
awesome-react-components - cogo-toast - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, Promise support, inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_ (UI Components / Notification)

README

        


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)

[![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 [email protected]

```

## 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)

#### 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)):

  

    
_{Anmol Mahatpurkar}
💻 🎨 📖

    
_{Balázs Orbán}
💻

    
_{Vitalii Kalchuk}
💻

    
_{Amar Pathak}
📖

    
_{Nataly Shrits}
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!