DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A customizable and easy-to-use React library for displaying toast notifications

🍞 Crunchy Toast – React Toast Notifications Library

A customizable and easy-to-use React library for displaying toast notifications

Crunchy Toast is a lightweight, customizable, and easy-to-use React library for displaying toast notifications in your web applications.

Installation

You can install the crunchy-toast library via npm:

npm install crunchy-toast
Enter fullscreen mode Exit fullscreen mode

Usage

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

  1. Import the showToast function from the library:
import showToast from 'crunchy-toast';
Enter fullscreen mode Exit fullscreen mode
  1. Call showToast to display a toast notification:
showToast('This is a sample toast message', 'success', 3000);
Enter fullscreen mode Exit fullscreen mode

The showToast function accepts three parameters:

  • message: The text message you want to display in the toast.
  • type: The type of toast notification (options: ‘info’, ‘success’, ‘warning’, ‘alert’).
  • duration (optional): The duration in milliseconds for which the toast should be visible. Default is 3000ms (3 seconds).

Examples

Here are some examples of how to use Crunchy Toast:

Basic Toast

showToast('This is a basic toast message', 'info');
Enter fullscreen mode Exit fullscreen mode

Success Toast

showToast('Success! Your action was successful', 'success', 2000);
Enter fullscreen mode Exit fullscreen mode

Warning Toast

showToast('Warning: Proceed with caution', 'warning', 4000);
Enter fullscreen mode Exit fullscreen mode

Alert Toast

showToast('Alert! An error occurred', 'alert', 6000);
Enter fullscreen mode Exit fullscreen mode

Contributing

We welcome contributions to the Crunchy Toast library! If you find a bug or have an enhancement in mind, please open an issue or submit a pull request on our Crunchy Toast.

GitHub

View Github

Top comments (0)

Warp.dev image

Warp is the highest-rated coding agent—proven by benchmarks.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp