react-crisp-toast 🍞

Lightweight toast notification library for React.

Live Demo

Check out the live demo of react-crisp-toast in action: 👉 Demo1: Full Feature 👉 Demo2: Minimal

Features

• Type-based styling
  Automatically applies styles based on toast types such as success, error, warning, or info.

• Dynamic positioning
  Display toasts flexibly at the top, bottom, left, right, or center of the screen by specifying vertical and horizontal props.

• Toast display duration
  Control how long each toast stays visible on the screen.

• Maximum number of visible toasts
  Limit the number of toasts displayed simultaneously, with a queue system for overflow.

• Swipe-to-dismiss
  Allows users to manually dismiss toasts with swipe gestures.

• Sound notifications
  Play sound notifications based on the type of message. Users can customize these sounds.

Installation

Install the library via npm or yarn:

npm install react-crisp-toast

yarn add react-crisp-toast

Usage

To use react-crisp-toast in your project, follow these steps.

1. Wrap your application with the ToastProvider

ToastProvider component manages the state of all toasts and must wrap your application (or a part of it) to provide context.

import { ToastProvider } from "react-crisp-toast";

const App = () => (
  <ToastProvider maxToasts={10}>
    <YourApp />
  </ToastProvider>
);

export default App;

2. Use the useToast hook to add toasts:

import { useToast } from "react-crisp-toast";

const ExampleComponent = () => {
  const { addToast } = useToast();

  const showToast = () => {
    addToast({ message: "This is a toast message!" });
  };

  return <button onClick={showToast}>Show Toast</button>;
};

API Reference

ToastProvider Props

| Prop | Type | Description | Required | Default | | -------------- | -------- | ----------------------------------------------------------- | ------------ | ----------- | | maxToasts | number | The maximum number of toasts that can be displayed at once. | No | 5 | | soundEnabled | boolean | Whether to enable sound for toast notifications. | No | false |

addToast Parameters

| Name | Type | Description | Required | Default | | --------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------- | | message | ReactNode | The content/message to be displayed in the toast. | Yes | - | | type | "success" | "error" | "warning" | "info" | The type of the toast. | No | info | | duration | number | How long the toast stays visible. Duration in milliseconds. | No | 3000 | | position | object | The position of the toast on the screen. Accepts an object with vertical and horizontal properties. | No | { vertical: "top", horizontal: "right" } | | position.vertical | "top" | "bottom" | Vertical position of the toast. | No | "top" | | position.horizontal | "left" | "right" | "center" | Horizontal position of the toast. | No | "right" | | showCloseButton | boolean | Whether to display a close button on the toast. | No | false | | soundEnabled | boolean | Whether to play a sound when the toast appears. | No | false |

License

This project is licensed under the MIT License.

Sound Effect

The sound effects used in this project are sourced from the Interface Sounds collection on Pixabay. These sounds are in the public domain and are free to use under the Pixabay Content License.