React Simple Toasts is a lightweight, user-friendly toast message library for React applications.

• Installation
• Usage
• Live Demo
• API
  • toast(message, options)
  • Toast Return Object
  • createToast(options)
  • toastConfig(options)
• Contributing
• License

To install the package via npm, run:

npm install react-simple-toasts

To utilize React Simple Toasts, invoke the toast function with a message to display:

import toast from 'react-simple-toasts';

function MyComponent() {
  return <button onClick={() => toast('Hello, world!')}>Display Toast</button>;
}

By default, the toast message is displayed for 3 seconds. Modify the duration by providing a second argument to the toast function:

toast('Hello, world!', 5000);

Adjust the appearance and behavior of the toast message by supplying an options object to the toast function:

toast('Hello, world!', {
  duration: 5000,
  position: 'top-right',
  clickable: true,
  clickClosable: true,
  className: 'custom-toast',
  render: (message) => <CustomToast message={message} />,
  onClick: (event) => console.log('Toast clicked!'),
});

Experience React Simple Toasts in action with our live demo.

Displays a toast message with the specified message and options.

When the toast function is called, it returns an object with a single method, close(), allowing you to manually close the toast message currently being displayed.

You can invoke this method at any time to close the toast message before its duration has elapsed. For instance, you might call it in response to a user interaction, such as a button click.

const myToast = toast('Hello, world!');
// ...
<button onClick={() => myToast.close()}>Close Toast Message</button>;

Available from version 3.6.0.

The createToast function creates and returns a new toast function instance based on the given options. This allows you to create and manage multiple pre-configured toast instances with various options.

The options object contains the following properties:

createToast is similar to toastConfig, which sets global default options, but it allows you to create and use toast instances with different configurations for more flexibility. This enables you to apply different options to each toast instance.

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

const customToast = createToast({
  duration: 5000,
  className: 'custom-toast',
  clickClosable: true,
  position: 'bottom-right',
  maxVisibleToasts: 3,
  render: (message) => <b className="my-toast">{message}</b>,
});

function MyComponent() {
  return (
    <button onClick={() => customToast('Hello, world!')}>
      Display Custom Toast
    </button>
  );
}

Sets default options for all toast messages.

The options object contains the following properties:

toastConfig is used to set global default options, which will be applied to all toast instances used throughout your app. However, if you need to create toast instances with different configurations, it is recommended to use createToast instead.

// index.js
import { toastConfig } from 'react-simple-toasts';

toastConfig({
  duration: 5000,
  className: 'custom-toast',
  clickClosable: true,
  position: 'bottom-right',
  maxVisibleToasts: 3,
  render: (message) => <b className="my-toast">{message}</b>,
});

Removes all currently displayed toast messages.

This function provides a convenient way to remove all active toast messages at once. It can be useful in situations where you need to clear all toasts, such as when a user logs out or navigates away from a page.

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

function ClearAllToastsButton() {
  return (
    <button onClick={() => clearToasts()}>Clear All Toast Messages</button>
  );
}

Contributions are always welcome! If you want to contribute to this project.

This project is licensed under the MIT License.