# @realmjs/react-toast

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

Latest version **1.0.7** (published 2023-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @realmjs/react-toast
pnpm add @realmjs/react-toast
yarn add @realmjs/react-toast
bun add @realmjs/react-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2023-08-09 |
| First published | 2023-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 49.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Duong Nguyen |
| Maintainers | duongtdn |

## Links

- npm: https://www.npmjs.com/package/@realmjs/react-toast
- Repository: https://github.com/realmjs/react-toast
- Homepage: https://github.com/realmjs/react-toast#readme
- Issues: https://github.com/realmjs/react-toast/issues
- npm.io page: https://npm.io/package/@realmjs/react-toast

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^6.0.0-rc.3
- [@realmjs/animation-utils](https://npm.io/package/@realmjs/animation-utils.md) ^1.0.0

## Recent versions

- 1.0.7 (latest) — 2023-08-09
- 1.0.6 — 2023-06-23
- 1.0.5 — 2023-06-23
- 1.0.4 — 2023-06-23
- 1.0.3 — 2023-06-23
- 1.0.2 — 2023-06-23
- 1.0.1 — 2023-06-23
- 1.0.0 — 2023-06-20

## README

# 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).

---
_Source: https://npm.io/package/@realmjs/react-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._