Feedback

useToast

Consumes the ToastProvider context to create, update, and dismiss toast notifications. Requires a ToastProvider ancestor in the component tree.

Copy React example Toast component

Live component preview · Astro

Explore Toast

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useToast.

Common feedback

Interactive patterns

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Button, ToastProvider } from '@santi020k/lumen-react'
import { useToast } from '@santi020k/lumen-react'

function SaveButton() {
  const toast = useToast()

  return (
    <Button onClick={() => toast.create({
      title: 'Saved',
      description: 'Your changes are live.',
      variant: 'success'
    })}>
      Save
    </Button>
  )
}

// Wrap your app with ToastProvider
export function App() {
  return (
    <ToastProvider placement="bottom-right" maxCount={5}>
      <SaveButton />
    </ToastProvider>
  )
}

import { Button, ToastProvider } from '@santi020k/lumen-react'
import { useToast } from '@santi020k/lumen-react'

function SaveButton() {
  const toast = useToast()

  return (
    <Button onClick={() => toast.create({
      title: 'Saved',
      description: 'Your changes are live.',
      variant: 'success'
    })}>
      Save
    </Button>
  )
}

// Wrap your app with ToastProvider
export function App() {
  return (
    <ToastProvider placement="bottom-right" maxCount={5}>
      <SaveButton />
    </ToastProvider>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Call useToast() without options.

Controller return values

Property	Type	Description
create	(detail: ToastDetail) => string	Create a toast and return its id. Accepts title, description, variant, duration, placement, and an optional action.
dismiss	(id?: string) => void	Dismiss a specific toast by id, or dismiss the most recent toast if no id is provided.
update	(id: string, detail: ToastDetail) => void	Update an existing toast with new content.
toasts	ToastRecord[]	Array of all active toast records.