Package Exports

react-simple-toasts
react-simple-toasts/dist/index.es.js
react-simple-toasts/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-toasts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Stargazers repo roster for @almond-bongbong/react-simple-toasts