Toast

Toasts display important information that informs the user about the consequence of an action – e.g. "Chart deleted". They are semantically categorized and colored to reflect the status.

info

The implementation of ToastProvider and ToastContext has been moved to mfe-shell and mfe-shared-context, respectively.
Please import ToastContext from mfe-shared-context. We have wrapped all the mfe apps with ToastProvider at root level in mfe-shell.

Example

Live Editor

function displayToast() {
  const ToastButton = () => {
    const { showToast } = useContext(ToastContext);

    const handleButtonClick = () => {
      showToast({
        title: 'Update requires a new SDK',
        message: 'Your changes require you to update the SDK integration to include new events.',
        action: {
          label: 'Go to integration',
          onClick: () => {},
          dataTestId: 'toast-button'
        },
        autoClose: 5000,
        type: 'warning',
        closeButton: true,
        delay: 300
      });
    };

    return <Button label="Show Toast" onClick={handleButtonClick} />;
  };

  return (
    <ToastProvider>
      <ToastButton />
    </ToastProvider>
  );
}

Result

Usage

info

All mfe apps are wrapped with ToastProvider from mfe-shell so you don't need to wrap your app one more time.

Through the ToastProvider your components will have access to a helper function for showing Toast items. Access this function via ToastContext like this:

// MyComponent.js

import { useContext } from 'react';
import { Button } from '@adjust/components';
import { ToastContext } from '@adjust/mfe-shared-context';

export default function YourComponent() {
  const { showToast } = useContext(ToastContext);

  return (
    <Button
      label="Show Toast"
      onClick={() => {
        showToast({
          title: 'Item deleted',
          action: { label: 'Undo', onClick: () => {} }
        });
      }}
    />
  );
}

The showToast function accepts a title, an optional message, an optional action, an optional delay, an optional autoClose, an optional closeButton and an optional severity (type).

Variants

Close Callback

onClose is a callback which is invoked if the Toast is closed by icon.

Live Editor

function displayToast() {
  const ToastButton = () => {
    const { showToast } = useContext(ToastContext);

    const handleButtonClick = () => {
      showToast({
        title: 'Toast title',
        message: 'Some more data for the toast',
        type: 'neutral',
        closeButton: true,
        autoClose: false,
        onClose: () => console.log('Toast is closed !!!')
      });
    };

    return <Button label="Show Toast" onClick={handleButtonClick} />;
  };

  return (
    <ToastProvider>
      <ToastButton />
    </ToastProvider>
  );
}

Result

Dismiss Toast

To dismiss a Toast you need to provide the toastId to the dismissToast handler. Each toast has a unique toastId by default which will be returned in showToast handler. You can also set a custom id to each toast. Please note that in case no id is provided for dismissToast handler it will dismiss all the toasts. You can see both approaches in these examples:

Live Editor

function toastExample() {
  const ToastButtons = () => {
    const [toastId, setToastId] = useState();
    const { showToast, dismissToast } = useContext(ToastContext);

    const handleShowToast = () => {
      const id = showToast({
        title: "Toast title",
        message: "Some more data for the toast",
        autoClose: false,
        type: "neutral",
      });
      setToastId(id);
    };

    const handleDismissToast = () => {
      dismissToast(toastId);
      setToastId(null);
    };
    return (
      <div>
        <Button
          label="Show Toast"
          onClick={handleShowToast}
          css={{ marginRight: 8 }}
        />
        <Button label="Dismiss Toast" onClick={handleDismissToast} />
      </div>
    );
  };

  return (
    <ToastProvider>
      <ToastButtons />
    </ToastProvider>
  );
}

Result

and with custom toastId:

Live Editor

function toastExample() {
  const ToastButtons = () => {
    const [toastId, setToastId] = useState();
    const { showToast, dismissToast } = useContext(ToastContext);

    const handleShowToast = () => {
      const customToastId = "123456";
      showToast({
        toastId: customToastId,
        title: "Toast title",
        message: "Some more data for the toast",
        autoClose: false,
        type: "neutral",
      });
      setToastId(customToastId);
    };

    const handleDismissToast = () => {
      dismissToast(toastId);
      setToastId(null);
    };
    return (
      <div>
        <Button
          label="Show Toast"
          onClick={handleShowToast}
          css={{ marginRight: 8 }}
        />
        <Button label="Dismiss Toast" onClick={handleDismissToast} />
      </div>
    );
  };

  return (
    <ToastProvider>
      <ToastButtons />
    </ToastProvider>
  );
}

Result

Type

The type prop lets you set the severity of toast messages and give it a semantic meaning.

Four different options are available: neutral, positive, warning and negative.

Live Editor

function toastExample() {
  const MyButton = ({ type }) => {
    const { showToast } = useContext(ToastContext);

    return (
      <Button
        label={type}
        onClick={() => {
          showToast({
            title: type,
            type
          });
        }}
      />
    );
  };

  return (
    <ToastProvider>
      <MyButton type="neutral" />
      <MyButton type="positive" />
      <MyButton type="warning" />
      <MyButton type="negative" />
    </ToastProvider>
  );
}

Result

Props

The object structure for individual Toasts passed into `showToast`:

Name	Type	Default
title * A short headline	string	—
children Children of the Toast Provider	ReactNode	—
message Optional prop to show more info underneath the title	string	—
position Optional prop for Toast position	'top-right' \| 'top-center' \| 'top-left' \| 'bottom-right' \| 'bottom-center' \| 'bottom-left'	"top-right"
autoClose Optional prop to set delays in ms to close the toast. If set to false, the notification needs to be closed manually	false \| number	5000
closeButton Optional prop to show close button	boolean	false
delay Optional prop to have delay in ms before showing Toast	number	—
action Optional action button to be shown in the Toast	{ label: string; onClick: () => void; dataTestId?: string; }	—
onClose A close callback if the Toast is closed by icon	() => void	—
* - the prop is required.

Example​

Usage​

Variants​

Close Callback​

Dismiss Toast​

Type​

Props​

The object structure for individual Toasts passed into showToast:​

Example

Usage

Variants

Close Callback

Dismiss Toast

Type

Props

The object structure for individual Toasts passed into `showToast`: