react-toast-drei

v1.0.10

Published

6 months ago

a simple react toast made by Andrei R. Parquez

0High
0Medium
0Low

andreiparquez

React Toast Drei

A simple and elegant React toast notification component created by Andrei R. Parquez.

Features

🎨 Beautiful, modern toast notifications with smooth animations
🎯 Four different toast types: Success, Error, Info, and Warning
⏱️ Customizable duration with visual progress bar
🎬 Smooth enter/exit animations powered by Framer Motion
🎨 Tailwind CSS styling with custom colors for each toast type
📱 Responsive design that works on all screen sizes
🔧 Easy to integrate and customize

Installation

npm install react-toast-drei

Dependencies

Make sure you have the following peer dependencies installed:

npm install framer-motion lucide-react react-icons tailwindcss

Tailwind CSS Setup

This package requires Tailwind CSS to be configured in your project. If you haven't set up Tailwind CSS yet:

Install Tailwind CSS Install tailwindcss and @tailwindcss/vite via npm.
```
npm install tailwindcss @tailwindcss/vite
```

Configure the Vite plugin Add the @tailwindcss/vite plugin to your Vite configuration.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Import Tailwind CSS Add an @import to your CSS file that imports Tailwind CSS.
```
@import "tailwindcss";
```
Start your build process Run your build process with npm run dev or whatever command is configured in your package.json file.
```
npm run dev
```
Start using Tailwind in your HTML Make sure your compiled CSS is included in the <head> (your framework might handle this for you), then start using Tailwind's utility classes to style your content.

Usage

Basic Setup

First, wrap your app with the ToastProvider:

import ToastProvider from 'react-toast-drei';
import App from './App';

function Root() {
  return (
    <ToastProvider>
      <App />
    </ToastProvider>
  );
}

export default Root;

Use the useToast hook in your components:

import { useToast } from 'react-toast-drei';

export default function MyComponent() {
  const toast = useToast();

  const handleSuccess = () => {
    toast('success', 'Operation completed successfully!');
  };

  const handleError = () => {
    toast('error', 'Something went wrong!');
  };

  const handleInfo = () => {
    toast('info', 'Here is some information for you.');
  };

  const handleWarning = () => {
    toast('warning', 'Please be careful with this action.');
  };

  return (
    <div>
      <button onClick={handleSuccess}>Show Success Toast</button>
      <button onClick={handleError}>Show Error Toast</button>
      <button onClick={handleInfo}>Show Info Toast</button>
      <button onClick={handleWarning}>Show Warning Toast</button>
    </div>
  );
}

Custom Duration

You can customize the duration of each toast (default is 5000ms):

const toast = useToast();

// Toast will disappear after 3 seconds
toast('success', 'Quick message!', 3000);

// Toast will disappear after 10 seconds
toast('error', 'Important error message!', 10000);

Toast Types

Success Toast

Color: Green
Icon: Check mark
Use case: Successful operations, confirmations

Error Toast

Color: Red
Icon: Triangle alert
Use case: Error messages, failed operations

Info Toast

Color: Blue
Icon: Information circle
Use case: General information, tips

Warning Toast

Color: Yellow/Orange
Icon: X mark
Use case: Warnings, cautions

Customization

The toast component uses Tailwind CSS classes and can be customized by modifying the styles in the source files. Each toast type has its own:

Background color for the icon container
Progress bar color
Themed icon

API Reference

`useToast()`

Returns a function to create toast notifications.

Parameters:

status (string): The type of toast - 'success', 'error', 'info', or 'warning'
message (string): The message to display in the toast
duration (number, optional): Duration in milliseconds (default: 5000)

`ToastProvider`

Context provider that manages toast state and rendering.

Props:

children: React components to wrap

Requirements

React 18.0.0 or higher
Framer Motion 11.0.0 or higher
Lucide React 0.292.0 or higher
React Icons 4.10.1 or higher
Tailwind CSS (for styling)

License

ISC

Author

Andrei R. Parquez

Made with ❤️ for the React community