Components
Toast

Toast

The Toast component is an easy-to-use, flexible solution for displaying unobtrusive notifications or simple messages in your application.

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, useToast, 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>
  )
}

Next, wrap your application in the AppToastProvider:

import { Toast, useToast, type ToastProviderProps } from '@ark-ui/react'

const App = () => <AppToastProvider>{/* Your App */}</AppToastProvider>

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, type ToastProviderProps } from '@ark-ui/react'

const SimpleToast = () => {
  const toast = useToast()
  return (
    <button
      onClick={() => {
        toast.create({
          title: 'Hello',
          description: 'This is a toast',
        })
      }}
    >
      Add Toast
    </button>
  )
}

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, type ToastProviderProps } 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>
  )
}

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, type ToastProviderProps } 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>
  )
}

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:

import { Toast, useToast, type ToastProviderProps } from '@ark-ui/react'

const DefaultOptions = () => (
  <AppToastProvider defaultOptions={{ duration: 2000, placement: 'top-end', removeDelay: 250 }}>
    {/* ... */}
  </AppToastProvider>
)

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.

Previous

Tags Input