Toast

Toast is a small, nonblocking notification pop-up. A toast is shown to users with readable message content at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out) or with a button.

Usage

Place ToastProvider at the root of the project.

Then use useToaster to get a toaster object with methods to create toasts.

import { useToaster } from "swash/Toast";
import { Button } from "swash/Button";

const toaster = useToaster();

() => (
    <div className="flex gap-2">
      <Button onClick={() => toaster.success("Subject created")}>
        Success
      </Button>
      <Button
        onClick={() => toaster.danger("Creation of the subject has failed")}
      >
        Danger
      </Button>
      <Button onClick={() => toaster.warning("Warning")}>Danger</Button>
      <Button onClick={() => toaster.info("Info")}>Danger</Button>
    </div>
);

Customization

Options

You can customize the default options of the toaster object by passing a options object to the trigger function.

Options are:

level: The level of the toast. Can be critical, minor. Default is minor.
dismissDelay: The delay before the toast is dismissed. Default is 4000.
closable: If the toast is closable. Default is true.
action: A function that returns a React element. The element is displayed as a button in the toast. Default is undefined.
detail: A React element. The element is displayed as a detail in the toast. Default is undefined.

import { Button } from "swash/Button";
import { useToaster } from "swash/Toast";
import { AlertBubbleOutline } from "swash/icons";

const toaster = useToaster();

() => (
    <Button
      onClick={() =>
        toaster.success("Subject created", {
          closable: true,
          dismissDelay: 10000,
          level: "critical",
          action: ({ buttonProps }) => (
            <Button {...buttonProps}>
              <AlertBubbleOutline />
              Click
            </Button>
          ),
          detail: (
            <div className="flex gap-2">
              <AlertBubbleOutline /> <span>Nice one</span>
            </div>
          )
        })
      }
    >
      Customized toast
    </Button>
);