useToasts

The useToasts hook provides an easy and efficient way to manage toast notifications in your React application. This hook offers functionality to create, display, and remove toasts, with customizable layouts and behaviors.

Usage

First, you need to import the useToasts hook from the kitchn package.

import { useToasts } from "kitchn";

Example

Here is an example of how to use the useToasts hook in a component:

Parameters

The useToasts hook accepts an optional layout parameter:

Name	Type	Description
`layout`	`ToastLayout` (optional)	An object that defines the layout for the toasts, such as padding, margin, width, and placement.

ToastLayout

Name	Type	Default	Description
`padding`	`React.CSSProperties["padding"]`	`"12px 16px"`	Defines the padding inside the toast.
`margin`	`React.CSSProperties["margin"]`	`"8px 0"`	Defines the margin outside the toast.
`width`	`React.CSSProperties["width"]`	`"420px"`	Sets the width of the toast.
`maxWidth`	`React.CSSProperties["maxWidth"]`	`"90vw"`	Sets the maximum width of the toast.
`maxHeight`	`React.CSSProperties["maxHeight"]`	`"75px"`	Sets the maximum height of the toast.
`placement`	`"topLeft" \| "topRight" \| "bottomLeft" \| "bottomRight"` \| `"bottomRight"`	Determines where the toast will appear on the screen.

Return Value

The useToasts hook returns an object with the following properties:

Property	Type	Description
`toasts`	`Toast[]`	An array of current toast notifications.
`setToast`	`(toast: ToastInput) => void`	Adds a new toast to the list.
`removeAll`	`() => void`	Removes all active toasts.
`findOneToastByID`	`(id: string) => Toast \| undefined`	Finds a toast by its ID, returning the toast if found, or `undefined` if not.
`removeToastByID`	`(id: string) => void`	Removes a specific toast by its ID, setting its visibility to `false`.

ToastInput

Name	Type	Default	Description
`text`	`string \| React.ReactNode`	`(required)`	The content of the toast, which can be a string or a React node.
`type`	`ToastTypes`	`"primary"`	The type of the toast, determining its color based on `AccentColors`.
`id`	`string`	Generated ID	An optional unique ID for the toast. If not provided, an ID will be generated automatically.
`delay`	`number`	`2000`	How long the toast should be visible (in milliseconds) before it is automatically removed.
`actions`	`ToastAction[]`	`[]`	An array of actions (buttons) that can be included in the toast.
`preserve`	`boolean`	`false`	If true, the toast will remain visible until manually closed. Automatically set to true if any non-passive action is present.

ToastAction

Name	Type	Required	Description
`name`	`string`	Yes	The text displayed on the action button.
`handler`	`(event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void`	Yes	Function called when the action is triggered. Receives the click event and a cancel function to close the toast.
`passive`	`boolean`	No	If `false`, the toast will be preserved until an action is taken. If `true`, the toast can auto-dismiss.

useTheme useWarning