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)