Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonorusc/usetoast-hook
Here's how I manage toasts inside my applications using zustand
https://github.com/jonorusc/usetoast-hook
react typescript zustand
Last synced: 26 days ago
JSON representation
Here's how I manage toasts inside my applications using zustand
- Host: GitHub
- URL: https://github.com/jonorusc/usetoast-hook
- Owner: Jonorusc
- License: mit
- Created: 2023-11-06T17:47:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-06T18:59:27.000Z (over 1 year ago)
- Last Synced: 2024-11-24T03:12:29.525Z (3 months ago)
- Topics: react, typescript, zustand
- Language: TypeScript
- Homepage: https://devbylucas.vercel.app/project/creating-a-react-hook-using-zustand
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useToast Hook
The `useToast` hook is a custom hook built with [Zustand](https://github.com/pmndrs/zustand) for managing toast notifications in a React application. It provides a simple and flexible API for adding, removing, and managing toast notifications.
## Features
- Add a toast with a custom message, type, position, and timeout.
- Automatically remove a toast after a specified timeout.
- Pause the timeout when a toast is hovered over.
- Resume the timeout with the remaining time when the toast is no longer being hovered over.
## Usage
First, import the `useToast` hook:
```jsx
import { useToast } from './use-toast'
```
Then, you can use it in your components
```jsx
const YourComponent = () => {
const { addToast } = useToast()
const showToast = () => {
const toast = {
id: Date.now(), // unique id for the toast
type: 'success',
position: 'top-right',
timeout: 5000, // 5 seconds
data: {
message: 'This is a toast message',
}
}
addToast(toast)
}
return (
Show Toast
)
}
```
In the toast rendering component, you should add `onMouseEnter` and `onMouseLeave` event handlers to call `pauseToast` and `resumeToast` respectively:
```jsx
const ToastComponent = ({ toast }) => {
const { removeToast, pauseToast, resumeToast } = useToast()
return (
pauseToast(toast.id)}
onMouseLeave={() => resumeToast(toast.id)}
>
{toast.data.message}
removeToast(toast.id)}>Close
)
}
```
In this example, when the mouse enters the toast, the timeout is paused, and when the mouse leaves the toast, the timeout is resumed. The close button removes the toast immediately.
## API
The useToast hook provides the following functions:
- addToast(toast: Toast): Adds a new toast.
- removeToast(id: number): Removes a toast by id.
- pauseToast(id: number): Pauses the timeout of a toast by id.
- resumeToast(id: number): Resumes the timeout of a toast by id.
The Toast type has the following properties:
- id: number: A unique id for the toast.
- type: 'success' | 'error' | 'warning' | 'info': The type of the toast.
- position: POSITION: The position of the toast.
- timeout: number: The timeout in milliseconds after which the toast will be automatically removed.
- data: ToastData: The data for the toast, such as the message to be displayed.
- hovered: boolean: Whether the toast is being hovered over. This is managed internally by the hook.