Setup

Make sure to include the Toaster component inside the provider to enable toast notifications.

For installation and setup instructions, see the Getting Started guide.

Recommended: Place this in src/main.tsx (React root element)

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App"
import { Provider, Toaster } from "@fefade/react"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider>
      <Toaster>
        <App />
      </Toaster>
    </Provider>
  </StrictMode>
)

Usage

Preview

successwarningerrorinfotop-leftbottom-lefttop-rightbottom-rightbottom-centertop-centerDuration: 50000ClosableWith Progress Loader

Code

import { Constants } from "@fefade/core"
import { Button, Toaster, useToast } from "@fefade/react"

function ToastPreview() {
  const toast = useToast()

  const positions = [
    "top-left",
    "bottom-left",
    "top-right",
    "bottom-right",
    "bottom-center",
    "top-center"
  ] as const

  return (
    <div
      style={{
        display: "flex",
        gap: "1rem",
        alignItems: "center",
        flexWrap: "wrap"
      }}
    >
      {Constants.statusColors.map((color) => (
        <Button
          key={color}
          onClick={() => {
            toast.add({
              message: color,
              color
            })
          }}
          className={`bg-${color} text-on-${color}`}
        >
          {color}
        </Button>
      ))}

      {positions.map((position) => (
        <Button
          key={position}
          onClick={() => {
            toast.add({
              message: position,
              position
            })
          }}
        >
          {position}
        </Button>
      ))}

      <Button
        onClick={() => {
          toast.add({
            message: "Duration: 50000",
            duration: 50000
          })
        }}
      >
        Duration: 50000
      </Button>

      <Button
        onClick={() => {
          toast.add({
            message: "closable",
            isClosable: true
          })
        }}
      >
        Closable
      </Button>

      <Button
        onClick={() => {
          toast.add({
            message: "with progress loader",
            withProgressLoader: true,
            duration: 15000
          })
        }}
      >
        With Progress Loader
      </Button>
    </div>
  )
}

export default function () {
  return (
    <Toaster>
      <ToastPreview />
    </Toaster>
  )
}