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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More