Skip to main content

ToastProvider

Provides the state for toast messages and displays them.

Usage​

1. Add to Layout​

Wrap your application with the ToastProvider component.

import { ToastProvider } from "@fedibtc/ui"

export default function Layout({ children }: { children: React.ReactNode }) {
  return <ToastProvider>{children}</ToastProvider>
}

2. Use the useToast hook​

import { useToast, Button } from "@fedibtc/ui"

export default function Page() {
  const toast = useToast()

  return (
    <Button
      onClick={() => toast.show({ content: "I am a toast", status: "success" })}
    >
      Show Toast
    </Button>
  )
}

useToast examples​

Show a success toast​

toast.show({
  content: "Success toast",
  status: "success"
})

Show an error toast​

With a string​
toast.show({
  content: "Error toast",
  status: "error"
})
Formatted error​
try {
  throw new Error("This is an error")
} catch (error) {
  // The default error message defaults to "An unknown error occurred"
  toast.error(error, "An error occurred")
}

Show an info toast​

toast.show({
  content: "Info toast"
  // status is "info" by default and can be passed optionally
  // status: "info"
})

Reference​

ToastProvider​

Provides the state for toast messages and displays them.

Props​

NameTypeDescription
childrenReact.ReactNodeChild React nodes

Signature​

declare function ToastProvider({
  children
}: {
  children: React.ReactNode
}): JSX.Element

useToast​

Returns the current toast (or null), and functions to show and hide the current toast.

Signature​

declare function useToast(): {
  toast: Toast | null
  show: (toast: string | ShowToastArgs) => void
  error: (error: unknown, defaultMessage?: string) => void
  close: () => void
}

interface ShowToastArgs {
  content: string
  status?: "success" | "error" | "info"
}