@preachjs/toast

Simple toasts for preact

Demo →

Highlights

• 💅 CSS based
• ⚡️ Built on @preact/signals
• 📦 Tiny bundle size (~1KB GZipped)
• 🤌 Simple API

Install

npm i @preachjs/toast

Usage

import { toast, Toaster } from '@preachjs/toast'

const App = () => {
  return (
    <div>
      <button onClick={() => toast('hello')}>toast</button>
      <Toaster />
    </div>
  )
}

API

Toaster

Component that acts a container for the toasts.

toast(message: string, options?: Options)

Displays a toast with the provided message.

Options

| Name | Type | Default | Description | | ---------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------- | | position | string | 'top-center' | Position of the toast. Available options: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' | | closeDelay | number | 3000 | Delay in milliseconds before the toast automatically closes. |

MessageInput

Can be either a string or a JSX element:

type MessageInput = string | JSX.Element

Toast Variants

• toast.success(message: MessageInput, options?: Options) - Green success toast
• toast.error(message: MessageInput, options?: Options) - Red error toast
• toast.info(message: MessageInput, options?: Options) - Blue info toast
• toast.warning(message: MessageInput, options?: Options) - Yellow warning toast

toast.promise(promise: Promise, options: PromiseOptions)

Displays toasts for different promise states.

PromiseOptions

| Name | Type | Description | | ------- | ------ | ------------------------------------------------ | | loading | string | Message to display while the promise is pending. | | success | string | Message to display if the promise resolves. | | error | string | Message to display if the promise rejects. |

Promise Example

const saveData = async () => {
  const promise = fetch('/api/data')

  toast.promise(promise, {
    loading: 'Saving...',
    success: 'Data saved!',
    error: 'Failed to save data',
  })
}

License

MIT