This is a react toast package
npm install niz-react-toastsuccess, error, warning, info, loading
bash
npm install niz-react-toast
`
Usage
$3
Import the required components in your application.
`javascript
import React from 'react';
import Toast, { ToastCenter } from 'niz-react-toast';
function App() {
return (
);
}
export default App;
`
$3
- Default Toast
`javascript
Toast("This is a default toast!");
`
- Success Toast
`javascript
Toast.success("This is a success message!");
`
- Error Toast
`javascript
Toast.error("An error occurred!");
`
- Warning Toast
`javascript
Toast.warning("This is a warning!");
`
- Info Toast
`javascript
Toast.info("Some informational message.");
`
- Loading Toast
`javascript
Toast.loading("Loading...");
`
$3
Handle async operations with toast updates:
`javascript
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."
}
);
`
$3
#### ToastCenter Props
| 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). |
#### Themes
Use theme` to apply predefined styles or create your custom styles.