react-toast-lite v1.0.5

react-toast-lite

The react-toast-lite is a lightweight, easy-to-use toast notification component for React applications. It provides a simple way to display brief messages in the form of toast notifications, which can be used to inform users about the success, error, or status of an operation.

Key Features

• Lightweight and Simple : Designed to be minimalistic and straightforward, focusing on performance and ease of use.

• Customizable Positioning : Allows you to specify the position of the toast notification on the screen.

• Auto-hide Functionality : Toast notifications automatically disappear after a set duration.

• Dynamic Color Change Based on Action Type: The component supports dynamic color changes based on the action type (info, error, success). This allows for a more intuitive visual feedback depending on the nature of the error or message being displayed.

Usage / Example

import React, { useState } from "react";
import { ToastLite } from "react-toast-lite";

function App() {
    const [isOpen, setOpen] = useState(false);

    return (
        <div>
            <button onClick={() => setOpen(true)}>Show Toast</button>
            <ToastLite
                open={isOpen}
                message='This is a toast message!'
                action='info'
                position='bottom-right'
            />
        </div>
    );
}

export default App;

Screenshots

Props

The following props are expected:

duration 0 means the toast won't close automatically, but we can click the close button to close it manually.

position value can be top-center or top-left or top-right or bottom-center or bottom-left or bottom-right