npm package: @realmjs/react-toast
Description: [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
Author: Duong Nguyen
Latest version: 1.0.7

# React Toast

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

```bash
npm install @realmjs/react-toast --save
```

## Usage

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

1. Import the necessary components and hooks:

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

2. Set up the Toast Provider component in your application:

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

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

3. Use the `toast` handler to show toast notifications, example below:

```javascript
// 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.

## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).