Toast

Transient notification built on React Aria's toast queue.

import { createToastQueue, Toast } from "@pockets-ui/components"

Anatomy

Part	Role
`createToastQueue`	Creates the queue. Call it once, at module scope.
`Toast.Region`	Renders the queue. Mount exactly one, at the app root.
`Toast.Root`	One toast, given the `toast` object from the region.
`Toast.Content`	Wraps the title and description.
`Toast.Title`	The headline.
`Toast.Description`	Optional supporting line.
`Toast.Close`	Dismiss button.

Queueing toasts

The queue is a plain object outside React, so any module can import it and call queue.add() — no context, no hook, no prop drilling. Toasts persist until dismissed unless you pass a timeout.

Code

import { Button, createToastQueue, Toast } from "@pockets-ui/components"

// The queue lives outside React — import it anywhere in the app and call
// queue.add() to show a toast. One <Toast.Region> at the app root renders it.
const queue = createToastQueue()

export default function ToastBasic() {
  return (
    <>
      <Button
        onPress={() =>
          queue.add({
            title: "Files uploaded",
            description: "3 files uploaded successfully.",
          })
        }
      >
        Show toast
      </Button>
      <Button
        variant="ghost"
        onPress={() =>
          queue.add({ title: "File has been saved!" }, { timeout: 5000 })
        }
      >
        Auto-dismiss (5s)
      </Button>

      {/* Render one Region at the root of your app. */}
      <Toast.Region queue={queue}>
        {({ toast }) => (
          <Toast.Root toast={toast}>
            <Toast.Content>
              <Toast.Title>{toast.content.title}</Toast.Title>
              {toast.content.description && (
                <Toast.Description>
                  {toast.content.description}
                </Toast.Description>
              )}
            </Toast.Content>
            <Toast.Close />
          </Toast.Root>
        )}
      </Toast.Region>
    </>
  )
}

The example keeps its Toast.Region inline so the demo is self-contained. In a real app, mount one region in your root layout and let feature code do nothing but queue.add().