lunaris-toast-popup
v1.0.4
Published
This is a toast notification Package
Downloads
4
Maintainers
Readme
lunaris-toast-popup
A lightweight and customizable toast notification library for React, providing visually appealing toast notifications with support for multiple types and styles.
Features
- Four Toast Types: Supports
error
,warning
,success
, andinfo
toast notifications. - Customizable Positioning: Easily control where toasts appear on the screen.
- Rich Style Option: Enable a richer, more detailed toast style with additional customization options.
- Auto-dismiss and Callbacks: Toasts automatically disappear after a specified duration with optional callbacks.
Installation
Install lunaris-toast-popup
using npm:
npm install lunaris-toast-popup
Or using yarn:
yarn add lunaris-toast-popup
Usage
First, import the useToast hook from lunaris-toast-popup into your React component:
import {useToast} from "lunaris-toast-popup";
You can then use this hook to trigger toast notifications. Here's a basic example:
import {useToast} from "lunaris-toast-popup";
const App = () => {
const { ToastComponent, triggerToast } = useToast("top-right");
return (
<div>
<button onClick={() => triggerToast({
title: "I am title",
type: "success",
message: "Hello, Toast!",
duration: 3000,
onClose: () => console.log("Toast closed"),
})}>
Show Toast
</button>
{/* Optionally render the ToastComponent to display the toast */}
{ToastComponent}
</div>
);
};
export default App;
Animations
- slide
- pop
- fade
<button onClick={() => triggerToast({
animation: "fade",
richStyle: true,
title: "I am title",
type: "success",
message: "Hello, I am Success Toast!",
duration: 3000,
onClose: () => console.log("I am toast"),
})}>
Show Rich Toast
</button>
Rich Style Toasts
If you want to use the richStyle variant, set the richStyle property to true:
<button onClick={() => triggerToast({
richStyle: true,
title: "I am title",
type: "success",
message: "Hello, I am Success Toast!",
duration: 3000,
onClose: () => console.log("I am toast"),
})}>
Show Rich Toast
</button>
Toast Types
The library supports the following toast types:
- error: Displays an error notification.
- warning: Displays a warning notification.
- success: Displays a success notification.
- info: Displays an informational notification.
GIF Previews
Default Style:
Rich Style:
Contributing
Contributions are welcome! Please open an issue or submit a pull request with your changes. License
Distributed under the MIT License. See LICENSE for more information.