Develop ultra fast with Prismane 🎉

Toaster

Toaster displays a container that renders elements for a given time and then removes them from the DOM.

Import

import { Toaster } from "@prismane/core";

Usage

function Demo() {
  const Inner = () => {
    const toast = useToast();

    return (
      <Button
        onClick={() => {
          toast({
            element: <Alert>Hello, World!</Alert>,
          });
        }}
      >
        Click to show toast
      </Button>
    );
  };

  return (
    <Toaster>
      <Inner />
    </Toaster>
  );
}

Important

Always wrap the application with the Toaster component!

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.