Light Toast

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

Installation

npm install light-toast --save

Usage

import Toast from 'light-toast';

class Button extends React.Component {
  handleClick = () => {
    Toast.info('message...', 3000, () => {
      // do something after the toast disappears
    });
  };

  render() {
    return <div onClick={this.handleClick}>btn</div>;
  }
}

API

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

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.

0.3.5

• update deps micro-event-manager

0.3.4

• update build dependencies
• update react peer dependency version
• use inline svg elements

0.3.3

• create queue class to manage messages
• fix issues when call Toast.hide() right after Toast.loading()

0.3.2

• update dependency

0.3.1

• update dependency

0.3.0

• extract event manager to an independent library

0.2.3

• fix issues when sometimes css transition doesn't trigger

0.2.2

• minimize css

0.2.0

• Embrace React hooks
• Use message queue
• CSS transition for smooth animation instead of JavaScript
• Use CSS modules to avoid global classNames pollution