Skip to content

Beautiful, Zero Configuration, Toast Messages for React. Only ~ 3kb gzip, with styles and icons, forked from https://cogoport.github.io/cogo-toast

License

Notifications You must be signed in to change notification settings

hannadrehman/toastify-react

 
 

Repository files navigation

toastify-react

Toastify React

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

Demo

npm package Small size npm Code style GitHub license

Toastify React

Install via NPM:

npm install --save toastify-react

Install via Yarn:

yarn add toastify-react

Usage

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

import toaster from 'toastify-react';

toaster.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.

toaster.success('This is a success message');

toaster.info('This is a info message');

toaster.loading('This is a loading message');

toaster.warn('This is a warn message');

toaster.error('This is a error message');

Use JSX

toastify-react is built using React. Which means any valid jsx can be used as the message in toaster

toaster.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.

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

Hide on Click

const { hide } = toaster.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.

toaster.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

Customize each type of Toast seperately

Customize each type of Toast seperately, by extending the ct-toast-<type> class. For example, in your CSS,

ct-toast-success {
  color: #FFFFFF;
  background: #6EC05F;
}

Only ~ 3kb 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 ~3kb gzip.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Anmol Mahatpurkar

💻 🎨 📖

Balázs Orbán

💻

Vitalii Kalchuk

💻

Amar Pathak

📖

Nataly Shrits

💻

hannad rehman

💻

Kartik Hedau

💻 🖋 🎨 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

How to run locally

yarn setup
yarn dev // runs rullup in watch mode
yarn dev:docs // runs docs website in dev mode.

About

Beautiful, Zero Configuration, Toast Messages for React. Only ~ 3kb gzip, with styles and icons, forked from https://cogoport.github.io/cogo-toast

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 79.1%
  • CSS 12.5%
  • JavaScript 8.4%