The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A lightweight and customizable toast notification component.
The Toast component is built using React hooks internally. Because hooks require client-side usage, the Toast implementation is exported from a separate directory. When using Toast in your app, import from:
import { useToast, Toaster, ToastAction } from "@bun-ui/react/toast"
This ensures everything works correctly without any extra configuration.
You must add a Toaster
component at the root layout of your application.
This component is responsible for rendering and managing toast notifications.
The Toaster only needs to be added once at the app's root.
import { Toaster } from "@bun-ui/react/toast"
export const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<>
{children}
<Toaster />
</>
)
}
The use-toast
hook provides a function createToast
that we can use to
display toast
import { useToast } from "@bun-ui/react/toast"
export const ToastDemo = () => {
const { createToast } = useToast()
return (
<Button
onClick={() => {
createToast({
title: "Task completed",
})
}}
>
Show Toast
</Button>
)
}
Pass maxToasts
option to the useToast
hook to change the number of toasts
For accessibility reasons, we recommend limiting the number of toasts to 4 at a time (default).
This example allows up to 10 toasts to be displayed at the same time.