Usage
To get started, import the necessary components from the package:
import {
Toast,
ToastCloseTrigger,
ToastDescription,
ToastGroup,
ToastPlacements,
ToastProvider,
ToastTitle,
useToast,
} from '@ark-ui/react'
Setup
To setup the Toast environment in your application, create a AppToastProivder
.
This provider manages the placement and grouping of toasts.
import { Toast, type ToastProviderProps } from '@ark-ui/react'
const AppToastProvider = (props: ToastProviderProps) => {
const { children, ...rest } = props
return (
<Toast.Provider {...rest}>
<Toast.Placements>
{(placements) =>
placements.map((placement) => (
<Toast.Group key={placement} placement={placement}>
{(toasts) =>
toasts.map((toast) => (
<Toast.Root key={toast.id} toast={toast}>
<Toast.Title />
<Toast.Description />
<Toast.CloseTrigger>close</Toast.CloseTrigger>
</Toast.Root>
))
}
</Toast.Group>
))
}
</Toast.Placements>
{children}
</Toast.Provider>
)
}
import {
Toast,
ToastCloseTrigger,
ToastDescription,
ToastGroup,
ToastPlacements,
ToastProvider,
ToastTitle,
type ToastProviderProps,
} from '@ark-ui/solid'
import { children } from 'solid-js'
import { For } from 'solid-js/web'
const AppToastProvider = (props: ToastProviderProps) => {
const getChildren = children(() => props.children)
return (
<ToastProvider {...props}>
<ToastPlacements>
{(placements) => (
<For each={placements()}>
{(placement) => (
<ToastGroup placement={placement}>
{(toasts) => (
<For each={toasts()}>
{(toast) => (
<Toast toast={toast}>
<ToastTitle />
<ToastDescription />
<ToastCloseTrigger>Close</ToastCloseTrigger>
</Toast>
)}
</For>
)}
</ToastGroup>
)}
</For>
)}
</ToastPlacements>
{getChildren()}
</ToastProvider>
)
}
Story not available
Next, wrap your application in the AppToastProvider
:
const App = () => <AppToastProvider>{/* Your App */}</AppToastProvider>
const App = () => <AppToastProvider>{/* Your App */}</AppToastProvider>
Story not available
Basic Toast
You can create a basic Toast by using the useToast
hook. This hook gives you
access to the toast.create
method, which you can call to display a toast
notification:
import { Toast, useToast } from '@ark-ui/react'
const SimpleToast = () => {
const toast = useToast()
return (
<button
onClick={() => {
toast.create({
title: 'Hello',
description: 'This is a toast',
})
}}
>
Add Toast
</button>
)
}
import { Toast, useToast } from '@ark-ui/solid'
const SimpleToast = () => {
const toast = useToast()
return (
<button
onClick={() => {
toast().create({
title: 'Hello',
description: 'This is a toast',
})
}}
>
Add Toast
</button>
)
}
Story not available
Configuring Toast
To configure the Toast component, you can pass various options to the
toast.create
method. These options include title
, description
, type
,
placement
, duration
, and removeDelay
:
import { Toast, useToast } from '@ark-ui/react'
const ConfigureToast = () => {
const toast = useToast()
return (
<button
onClick={() => {
toast.create({
title: 'Success',
description: 'This is a success toast',
type: 'success',
placement: 'bottom-start',
duration: 20000,
removeDelay: 250,
})
}}
>
Add Toast
</button>
)
}
import { Toast, useToast } from '@ark-ui/solid'
const ConfigureToast = () => {
const toast = useToast()
return (
<button
onClick={() => {
toast().create({
title: 'Success',
description: 'This is a success toast',
type: 'success',
placement: 'bottom-start',
duration: 20000,
removeDelay: 250,
})
}}
>
Add Toast
</button>
)
}
Story not available
Custom Rendered Toast
For cases where you need more flexibility in rendering, the Toast component offers the ability to use a custom render function. This allows you to customize the content of the toast:
import { Toast, useToast } from '@ark-ui/react'
const CustomRenderToast = () => {
const toast = useToast()
return (
<button
onClick={() => {
toast.create({
title: 'Please checkout',
render: (toast) => (
<div>
{toast.title} <a href="https://ark-ui.com">Ark UI</a>
</div>
),
})
}}
>
Add Toast
</button>
)
}
import { Toast, useToast } from '@ark-ui/solid'
const CustomRenderToast = () => {
const toast = useToast()
return (
<button
onClick={() => {
toast().create({
title: 'Please checkout',
render: (toast) => (
<div>
{toast.title} <a href="https://ark-ui.com">Ark UI</a>
</div>
),
})
}}
>
Add Toast
</button>
)
}
Story not available
Default Options
You can also provide default options for all toasts in your application by
passing a defaultOptions
prop to the ToastProvider
. This prop should be an
object with the same keys as the options object that you pass to toast.create
:
const DefaultOptions = () => (
<AppToastProvider defaultOptions={{ duration: 2000, placement: 'top-end', removeDelay: 250 }}>
{/* ... */}
</AppToastProvider>
)
const DefaultOptions = () => (
<AppToastProvider defaultOptions={{ duration: 2000, placement: 'top-end', removeDelay: 250 }}>
{/* ... */}
</AppToastProvider>
)
Story not available
Conclusion
The Toast component provides an intuitive and versatile solution for conveying information to users in your applications. With its support for default options, custom render functions, and flexible configuration, it presents a wide array of design possibilities and use cases.