A lightweight, customizable, and feature-rich toast notification package for React applications.
- Multiple toast types:
success
,error
,warning
,info
,loading
- Promise-based toast notifications
- Auto-close functionality with customizable durations
- Update existing toasts seamlessly
- Flexible positioning
- Support for custom themes
npm install niz-react-toast
Import the required components in your application.
import React from 'react';
import Toast, { ToastCenter } from 'niz-react-toast';
function App() {
return (
<div>
<ToastCenter position="top-right" autoClose={true} autoCloseDuration={5} theme="solid" />
<button onClick={() => Toast.success("This is a success toast!")}>Show Toast</button>
</div>
);
}
export default App;
- Default Toast
Toast("This is a default toast!");
- Success Toast
Toast.success("This is a success message!");
- Error Toast
Toast.error("An error occurred!");
- Warning Toast
Toast.warning("This is a warning!");
- Info Toast
Toast.info("Some informational message.");
- Loading Toast
Toast.loading("Loading...");
Handle async operations with toast updates:
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded successfully!"), 2000);
});
};
Toast.promise(
fetchData(),
{
pending: "Loading data...",
success: "Data loaded successfully!",
error: "Failed to load data."
}
);
Prop | Type | Default | Description |
---|---|---|---|
position |
String | top-right |
Position of the toast notifications. |
autoClose |
Boolean | true |
Automatically close the toast after a duration. |
autoCloseDuration |
Number | 5 |
Duration (in seconds) before auto-closing. |
theme |
String | "" |
Theme for the toasts (e.g., light-colored , colored , dark , soft-glow , solid ). |
Use theme
to apply predefined styles or create your custom styles.
Contributions are welcome! Feel free to open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
Thank you for using this toast package. Feedback and suggestions are always appreciated!