React Toast Box

A React library for displaying toast notifications.

Description

react-toast-box is a simple and customizable React library for displaying toast notifications. It provides a flexible API to show different types of notifications such as success, info, warning, and error.

Installation

To install the library, use npm or yarn:

npm install react-toast-box

or

yarn add react-toast-box

Usage

First, wrap your application with the ToastProvider to provide the context for toasts:

import React from 'react';
import { ToastProvider } from 'react-toast-box';

function App() {
  return (
    <ToastProvider>
      {/* Your application components */}
    </ToastProvider>
  );
}

export default App;

To display a toast, use the ToastService:

import ToastService from 'react-toast-box';

ToastService.success('Success!', 'Your operation was successful.');
ToastService.error('Error!', 'Something went wrong.');

Components

• Toast: Displays individual toast notifications.
  • Props:
    • type: Type of the toast (success, info, warning, danger).
    • title: Title of the toast.
    • message: Message content of the toast.
    • onClose: Function to call when the toast is closed.
    • duration: Duration before the toast automatically closes.

Hooks

• useToast: Custom hook to manage toast visibility and state.

Context

• ToastProvider: Provides the context for managing toasts within the application.

Styles

The library includes default styles for the toast notifications. You can customize these styles by modifying the CSS in `src/styles