Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/priyammondal/react-flare-toast
React Flare Toast is a simple and customizable toast component for React applications.
https://github.com/priyammondal/react-flare-toast
alert push push-notifications react react-flare-toast react-toast react-toastify toast toast-notifications toastify
Last synced: about 9 hours ago
JSON representation
React Flare Toast is a simple and customizable toast component for React applications.
- Host: GitHub
- URL: https://github.com/priyammondal/react-flare-toast
- Owner: Priyammondal
- License: mit
- Created: 2024-08-30T18:49:47.000Z (25 days ago)
- Default Branch: main
- Last Pushed: 2024-09-15T14:40:21.000Z (9 days ago)
- Last Synced: 2024-09-24T09:02:51.303Z (about 14 hours ago)
- Topics: alert, push, push-notifications, react, react-flare-toast, react-toast, react-toastify, toast, toast-notifications, toastify
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-flare-toast
- Size: 307 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Flare Toast
React Flare Toast is a simple and customizable toast component for React applications.
## Installation
You can install React Flare Toast via npm:
```jsx
npm i react-flare-toast
```
## Usage
To use React Flare Toast in your React application, follow these steps:
Import the useToast hook and necessary styles in your component:
```jsx
import useToast from "react-flare-toast";
```
Initialize the useToast hook with your preferred position:
```jsx
const { Toast, triggerToast } = useToast("top-right");
```
#### Positions
- "top"
- "top-left"
- "top-right"
- "bottom"
- "bottom-left"
- "bottom-right"
Use Toast in your JSX to display toasts:
```jsx
return (
{Toast}
{/* Your other JSX content */}
);
```
Trigger toasts using the triggerToast function:
```jsx
triggerToast({
type: "success",
message: "This is a success message!",
duration: 3000,
});
```
#### Animations
You can specify an animation type for the toasts. The available animations are:
- "fade"
- "pop"
- "slide"
```jsx
triggerToast({
type: "success",
message: "This is a success message with a pop animation!",
duration: 3000,
animation: "pop",
});
```
## API
```jsx
useToast(position: PositionType)
```
This hook returns an object with the following properties:
- `Toast`: React element representing the toast container.
- `triggerToast(toastProps: toastProps)`: Function to trigger a toast with the specified properties.
`toastProps`
The triggerToast function accepts an object of type toastProps, which includes:
- type: Type of the toast (success, info, warning, error).
- message: Message to display in the toast.
- duration: Duration in milliseconds for which the toast should be displayed.
- animation (optional): Animation type for the toast (fade, pop, slide).
## Example
Here's a basic example of how to use React Flare Toast:
```jsx
import React from "react";
import useToast from "react-flare-toast";
function App() {
const { Toast, triggerToast } = useToast("top-right");
const handleButtonClick = () => {
triggerToast({
type: "success",
message: "This is a success message!",
duration: 3000,
animation: "slide",
});
};
return (
{Toast}
Toast Component
Show Success
);
}
export default App;
```
## License
This project is licensed under the MIT License