Toaster

Use showToast to trigger a Toast notification, and render <Toaster /> once in your app to display them. The Toast will pop up in the bottom of the viewport, and disappear after 3 seconds or on close button click.

Toast internally uses the Alert-component for visual display, controlled by the properties title, description and type. Available visual types are:

• "info"
• "error"
• "warning"
• "success"
• "neutral"

Usage

import { Button, showToast, Toaster } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <Button
        onClick={() =>
          showToast({
            type: "success",
            title: "Title",
            description: "Description",
          })
        }
      >
        Trigger Toast
      </Button>
      <Toaster />
    </>
  );
}

⛶

Closing toast

By default, the Toast will disappear after 3 seconds, or on close button click. But it can also be visible until close button is clicked, by setting duration to null.

import { Button, showToast, Toaster } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <Button
        onClick={() =>
          showToast({
            duration: null, // Toast will now never dismiss by duration
            type: "success",
            title: "Title",
            description: "Description",
          })
        }
      >
        Trigger Toast
      </Button>
      <Toaster />
    </>
  );
}

⛶

Custom distance to bottom of screen

Using distanceToBottom you can define a custom distance from the bottom of the viewport to the Toast. This could be useful if you have a fixed footer, and want to avoid the Toast overlapping it.

distanceToBottom can be either a responsive value or a fixed value (string). When undefined, the default behaviour is 48px on larger screens and 8px on smaller screens.

import { Button, showToast, Toaster } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <Button
        onClick={() =>
          showToast({
            type: "success",
            description: "Custom distance to bottom",
            distanceToBottom: "80px",
          })
        }
      >
        Trigger Toast
      </Button>
      <Toaster />
    </>
  );
}

⛶