Toaster

The Toaster component is a non-disruptive message that appears at the top of the viewport to provide quick, at-a-glance feedback on the outcome of an action.

Installation

To install @igloo-ui/toaster in your project, you will need to run the following command using npm:

npm install @igloo-ui/toaster

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/toaster

Usage

Displaying a toast

Then to use the component in your code just import it!

import { Toast } from '@igloo-ui/toaster';

const App = () => {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <div>
      <button onClick={() => setShowToast(true)}>Make me a toast</button>
      {showToast && (
        <Toast
          message="Here is your toast."
          onDissmiss={() => setShowToast(false)}
        />
      )}
    </div>
  );
};

Displaying multiple toasts

Then to use the component in your code just import it!

import Toaster, { useToaster } from '@igloo-ui/toaster';

const App = () => {
  const { toast, toastList } = useToaster();
  return (
    <div>
      <button onClick={() => toast.success('Successfully toasted!')}>
        Success
      </button>
      <button onClick={() => toast.error("This didn't work!")}>Error</button>
      <Toaster toasts={toastList} />
    </div>
  );
};

API

Toast

PropTypeDescription
messagestringThe content to display inside the Toast.
errorbooleanDisplay the error Toast.
durationnumber | "infinite"The length of time in milliseconds the toast message should persist.
dataTeststringAdd a data-test tag for automated tests.
onDissmiss() => voidHandler that is called when the overlay should close.

Toaster

PropTypeDescription
toasts[] | ToastArgs[]