React-crisp-toast NPM

react-crisp-toast 🍞

readme

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.