Ark UI

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.