react-simple-toasts

react-simple-toasts

Simple toast message popup for React ⚛️

Install

npm install --save react-simple-toasts

Usage

a very simple use

toast(message);
// or
toast(message, millisecond = 3000);
// or
toast(message, { time: 3000, ...options });

import React from 'react';
import toast from 'react-simple-toasts';

const Example = () => (
  <div className="example">
    <button onClick={() => toast('Hello toast!')}>Toast</button>
    <button onClick={() => toast('Message', 1000)}>One-second</button>
  </div>
);

Live Demo

Message

Message type can be ReactNode.

toast('Hello toast!');
// or
toast(<strong>Hello, toast</strong>);

Options

Name	Type	Default	Description
time	number	3000	The millisecond time that the message is displayed
className	string	''	Can be used to customize styles
clickable	string	false	Can click the message
clickClosable	boolean	false	Whether to close the toast when is clicked
position	bottom-left bottom-center bottom-right top-left top-center top-right	bottom-center	Position of toast popup
render	(message: ReactNode) => ReactNode	null	Renderer of the toast. The return value should be a ReactNode
onClick	(event) => void		Set the handler to handle click event Must be used with clickable: true

Config Defaults

You can specify config defaults.

index.js

import { toastConfig } from 'react-simple-toasts';

toastConfig({
  time: 5000,
  className: 'my-toast-message',
});

Name	Type	Default	Description
time	number	3000	The millisecond time that the message is displayed.
className	string	''	Can be used to customize styles.
position	bottom-left, bottom-center, bottom-right, top-left, top-center, top-right	bottom-center	Position of toast popup
clickClosable	boolean	false	Whether to close the toast when is clicked
render	(message: ReactNode) => ReactNode	null	Renderer of the toast. The return value should be a ReactNode

Thanks

Support it by joining stargazers for this repository. :star:

License

MIT © almond-bongbong