@realmjs/react-toast NPM

React Toast

React Toast is a lightweight library that enables you to easily add toast notifications to your React applications. With React Toast, you can display informative messages, errors, or success notifications to enhance the user experience.

Note: React Toast ensures that only one toast notification is displayed on the screen at a time. If multiple toast notifications are triggered simultaneously, they will be placed in a queue and displayed one after another, maintaining a smooth and organized user experience.

Installation

npm install @realmjs/react-toast --save

Usage

To use React Toast in your React application, follow these steps:

Import the necessary components and hooks:

import Toast, { useToast } from '@realmjs/react-toast';

Set up the Toast Provider component in your application:

const App = () => {
  const toast = useToast();

  return (
    <div>
      <Toast.Provider toast={toast} />
      {/* Your application components */}
    </div>
  );
};

Use the toast handler to show toast notifications, example below:

// show custom notification
toast.show((resolve, reject) => <CustomToast resolve={resolve} reject={reject}>Toast message</CustomToast>, { duration: 3000, bottom: true, animation: 'flyIn 0.8s' });
// show an error notification
toast.error('Error message', { closeButton: true, bottom: true });
//  show an info motification
toast.info('Info message', { duration: 3000, closeButton: false, animation: 'fadeIn' });
// show a success notification
toast.success('Success message', { duration: 3000, closeButton: false });

The toast.show function allows you to render a custom toast component with various options. The render parameter is a render function that returns the desired toast component. The options parameter can include:

duration: Sets the duration in milliseconds for how long the toast should be displayed.
bottom: If true, the toast will appear at the bottom of the screen.
animation: Configures the animation type and duration. Currently supports: flyIn, fadeIn, and zoomIn.

API

`Toast.Provider`

The Toast.Provider component is responsible for rendering and managing the toast notifications. It takes the following prop:

toast: The toast handler instance obtained using useToast.

`useToast`

The useToast hook provides access to the toast handler instance within functional components. It returns the toast handler object.

Toast Handler APIs

The toast handler object obtained from useToast provides the following APIs:

show(render, options): Displays a custom toast using the specified render function and options.
error(message, options): Displays an error toast with the given message and options.
info(message, options): Displays an informational toast with the given message and options.
success(message, options): Displays a success toast with the given message and options.

Please note that the show API allows you to provide a custom toast component through the render parameter, while the other APIs offer convenient shortcuts for displaying predefined toast types.