Getting Started

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

npm install tenedev-toast

yarn

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.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.