Light Toast

A light-weight React toast component with extremely easy API. Online Demo

Installation

yarn add light-toast

Version 0.2.0 and above require React hooks support, please use with caution.

Usage

import Toast from 'light-toast';

const Button = () => (
  <button
    onClick={() => {
      Toast.info('message...', 3000, () => {
        // do something after the toast disappears
      });
    }}
  >
    click me
  </button>
);

API

Toast.info(content, duration, onClose);
Toast.success(content, duration, onClose);
Toast.fail(content, duration, onClose);
Toast.loading(content, onClose);
Toast.hide();

| param | detail | type | default | | -------- | ----------------------------------------- | -------- | ------- | | content | toast message | string | | | duration | milliseconds delay to close | number | 3000 | | onClose | callback function after closing the toast | function | |

Notice

If you use Toast.loading(), you should call Toast.hide() by yourself to close the toast,
since this often happens when you make an asynchronous request.

When you are in loading state, you can call Toast.info(), Toast.success(), Toast.fail() directly to hide the loading message. This is useful when you want to hint something after waiting.