ssokurenko / react-simple-toasts

Simple toast popup for React

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

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
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	string	center	left, center, right
clickClosable	boolean	false	Whether to close the toast when is clicked

Thanks

Support it by joining stargazers for this repository. ⭐

License

MIT © almond-bongbong