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

1import React, { useState } from "react";
2import { ToastLite } from "react-toast-lite";
3
4function App() {
5    const [isOpen, setOpen] = useState(false);
6
7    return (
8        <div>
9            <button onClick={() => setOpen(true)}>Show Toast</button>
10            <ToastLite
11                open={isOpen}
12                message='This is a toast message!'
13                action='info'
14                position='bottom-right'
15            />
16        </div>
17    );
18}
19
20export default App;

Screenshots

Props

The following props are expected:

Props	Required	Value	Default
open	true	boolean	false
message	true	string
position	false		top-center
action	false	info or success or warning or error	info
duration	false	0 or 3 or 5 or 8 or 10	5

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