tenedev-toast

Effortless Toasts for React

Overview

tenedev-toast is a lightweight and customizable toast notification library for React. It allows you to easily show success, error, info, and warning toasts with rich colors, animations, and optional close buttons.

Installation

npm install tenedev-toast

or

yarn add tenedev-toast

Usage

Basic Usage

To use the toast notifications, you first need to add the Toaster component to your app, which will display the notifications.

import React from 'react';
import { Toaster } from 'tenedev-toast';

function App() {
  return (
    <div>
      <Toaster />
    </div>
  );
}

Adding Toasts

You can add toast notifications using the toast object, which provides methods for each toast type.

import { toast } from 'tenedev-toast';

toast('This is a message!');
toast.success('This is a success message!');
toast.error('An error occurred!');
toast.info('Here is some information!');
toast.warning('Warning: Something might go wrong.');

Customize Position and Appearance

The Toaster component accepts the following props:

• position: The position of the toast (top-left, top-mid, top-right, bottom-left, bottom-mid, bottom-right).
• richColors: Whether to use rich colors for the toast types (true or false).
• closeButton: Whether to display a close button for each toast (true or false).

Example:

<Toaster position="top-right" richColors={true} closeButton={true} />

Features

• Customizable Position: Place your toasts in any corner of the screen.
• Rich Color Support: Display success, error, info, and warning toasts with distinct colors.
• Animations: Toasts appear with smooth animations using motion.
• Close Button: Optionally include a close button for user control.
• Multiple Toasts: Stack multiple toasts without interference.

API

The following methods are available for triggering toast notifications:

• toast.success(message: string)
• toast.error(message: string)
• toast.info(message: string)
• toast.warning(message: string)
• toast.message(message: string)

Example

import React from 'react';
import { toast } from 'tenedev-toast';
import { Toaster } from 'tenedev-toast';

function App() {
  return (
    <div>
      <Toaster position="bottom-right" />
      <button onClick={() => toast.success('Hello World!')}>Show Success Toast</button>
    </div>
  );
}

For more detailed documentation, please visit the documentation site.

License

Released under the MIT License.