react-basic-toastify v3.0.0

react-basic-toastify

A lightweight and customizable toast notification library for React.

Installation

Install the package via npm or yarn:

npm install react-basic-toastify
# or
yarn add react-basic-toastify
# or
pnpm add react-basic-toastify

Usage

Step 1: Wrap your application with ToastProvider

The ToastProvider is required to enable toast notifications in your application. Wrap it around the root component of your app.

import {ToastProvider} from 'react-basic-toastify';

export default function App() {
  return (
    <ToastProvider>
      <YourComponent/>
    </ToastProvider>
  );
}

Step 2: Use the toast object to show notifications

The toast object provides methods for displaying notifications. You can use it in any child component of the ToastProvider.

import { toast } from 'react-basic-toastify';

export default function Example() {
  return (
    <div>
      <button onClick={() => toast.success('This is a success message!')}>
        Show Success Toast
      </button>
      <button onClick={() => toast.error('This is an error message!')}>
        Show Error Toast
      </button>
      <button onClick={() => toast.info('This is an info message!')}>
        Show Info Toast
      </button>
    </div>
  );
}

API

ToastProvider

The ToastProvider component is a wrapper for your app to enable toast notifications.

Props

Example:

<ToastProvider position="bottom-right">
  <YourComponent />
</ToastProvider>

toast Object

The toast object provides methods for displaying toast notifications.

Methods

Parameters

Example:

import { toast } from 'react-basic-toastify';

toast.success('Operation successful!', 5000, true);
toast.error('An error occurred!', 4000);
toast.info('Here is some information.', 3000, false);

Customizing Styles

You can customize the appearance of the toast notifications by overriding CSS variables.

Default CSS Variables

  --toast-background-color: #333;
  --toast-text-color: #fff;
  --toast-success-color: #4caf50;
  --toast-error-color: #f44336;
  --toast-info-color: #2196f3;

Example: Custom Styling

  --toast-background-color: #000;
  --toast-text-color: #e0e0e0;
  --toast-success-color: #28a745;
  --toast-error-color: #dc3545;
  --toast-info-color: #007bff;

Complete Example

Here’s how you can use the library in a complete setup:

import React from 'react';
import { ToastProvider, toast } from 'react-basic-toastify';

function App() {
  return (
    <ToastProvider position="top-right">
      <Example />
    </ToastProvider>
  );
}

function Example() {
  return (
    <div>
      <button onClick={() => toast.success('Success!', 5000, true)}>
        Show Success Toast
      </button>
      <button onClick={() => toast.error('Error!', 4000, true)}>
        Show Error Toast
      </button>
      <button onClick={() => toast.info('Info!', 3000, false)}>
        Show Info Toast
      </button>
    </div>
  );
}

export default App;

License

This library is licensed under the MIT License. See the LICENSE file for more details.