Toast

A toast is a non-blocking notification commonly used to provide feedback to the user after an action has been taken. This component is a wrapper around the React Hot Toast library.

React Hot Toast Documenation

Import

import { toast, Toaster } from "@aeonkit/react";

Usage

Default

The Toaster component should be placed at the root of your application to ensure that toasts are displayed correctly. A good place to put it is in your main layout component.

<html>
  <body>
    <App />
    <Toaster />
  </body>
</html>

Preview
Code

<Button
  color="blue"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
    })
  }}
>
  Open Info Toast
</Button>
<Button
  color="teal"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      status: "success",
    })
  }}
>
  Open Success Toast
</Button>
<Button
  color="amber"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      status: "warning",
    })
  }}
>
  Open Warning Toast
</Button>
<Button
  variant="danger"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      status: "error",
    })
  }}
>
  Open Error Toast
</Button>

Using Options

You can pass in any React Hot Toast options to the toast function via options . Refer to the React Hot Toast documentation for more information.

Preview
Code

<Button
  color="pink"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      options: {
        position: "top-center",
        duration: 15000,
      },
    })
  }}
>
  Open Toast
</Button>

Loading

Set the status prop to loading to display a loading spinner in the toast that will load indefinitely. The toast is not dismissible by default when the status is set to loading. Use toast.dismiss() to dismiss the toast.

Preview
Code

<Button
  color="fuchsia"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      status: "loading",
    })
  }}
>
  Open Loading Toast
</Button>

Custom Content

You can pass in custom content to the toast function via the render prop. The render function receives the toast and dismiss functions as arguments.

Preview
Code

<Button
  color="cyan"
  onClick={() => {
    toast.dismiss()
    toast({
      render: (toast, dismiss) => (
        <div className="p-4 flex flex-row gap-8 items-center">
          <p className="text-slate-600 dark:text-slate-50">
            my custom toast content for toast id: {toast.id}
          </p>
          <Button onClick={() => dismiss(toast.id)} size="xs">
            Close
          </Button>
        </div>
      ),
    })
  }}
>
  Open Toast
</Button>

Custom Icons

You can pass in custom status and close icons to the toast function via options.icon and closeIcon respectively.

Preview
Code

<Button
  color="yellow"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      options: {
        icon: (
          <LuLightbulb className="h-7 w-7 text-yellow-400 dark:text-yellow-300" />
        ),
      },
    })
  }}
>
  Open Custom Icon Toast
</Button>
<Button
  color="green"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      closeIcon: (
        <LuXOctagon className="h-7 w-7 text-green-400 dark:text-green-300" />
      ),
    })
  }}
>
  Open Custom Close Icon Toast
</Button>

Styling

You can pass in custom classes to the toast function via options.className.

Preview
Code

<Button
  color="purple"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      options: {
        className: "bg-blue-100 dark:bg-blue-700",
      },
    })
  }}
>
  Open Toast
</Button>

Animations

You can pass in custom transitions to the toast function via transitions. Refer to the Headless UI Transitions documentation for more information.

Preview
Code

<Button
  color="orange"
  onClick={() => {
    toast.dismiss()
    toast({
      title: "Shoreditch poke",
      description: "Next level gochujang tonx four dollar toast poke.",
      transitions: {
        enter: "transform ease-out duration-1000 transition",
        enterFrom: "opacity-0 translate-y-2",
        enterTo: "opacity-100 translate-y-0",
        leave: "transition ease-in duration-100",
        leaveFrom: "opacity-100",
        leaveTo: "opacity-0",
      },
    })
  }}
>
  Open Toast
</Button>

API

`toast`

title?

ReactNode

The title of the toast.

description?

ReactNode

The content of the toast.

status?

"success" "error" "warning" "info" "loading"

The status of the toast. Determines the icon of the toast.

Default: info

render?

(toast: HotToast, dismiss: (toastId?: string) => void) => ReactNode

A function that returns the content of the toast. Use this to render custom content.

options?

HotToastOptions

The options to configure the toast. Refer to the React Hot Toast documentation for more information.

closable?

boolean

Whether the toast can be dismissed by the user.

closeIcon?

ReactNode

The icon to use for the close button.

transitions?

TransitionProps

The transitions to use for the toast. Refer to the Headless UI Transitions documentation for more information.

`toast.remove`

This method removes a specific toast via a toast ID without any animations instantly. Refer to the React Hot Toast documentation for more information.

  toast.remove()
  // or
  toast.remove(toastId)

`toast.dismiss`

This method dismisses all toast or a specific toast via a toast ID. Refer to the React Hot Toast documentation for more information.

  toast.dismiss()
  // or
  toast.dismiss(toastId)

Toaster Props

Toaster

API Interface: ToasterProps