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 offsetTop={76}> <ToastButton /> </ToastProvider> ); }

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 offsetTop={76}>
      <ToastButton />
    </ToastProvider>
  );
}

Result

Loading...

Usage

To set up the Toast component you need to wrap your component tree with the ToastProvider.

// App.js

import { ToastProvider } from '@adjust/components';

export default function() {
  return (
    <ToastProvider>
      {...}
    </ToastProvider>
  );
}

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 { ToastContext, Button } from '@adjust/components';

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 offsetTop={76}> <ToastButton /> </ToastProvider> ); }

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 offsetTop={76}>
      <ToastButton />
    </ToastProvider>
  );
}

Result

Loading...

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 offsetTop={76}> <ToastButtons /> </ToastProvider> ); }

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 offsetTop={76}>
      <ToastButtons />
    </ToastProvider>
  );
}

Result

Loading...

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 offsetTop={76}> <ToastButtons /> </ToastProvider> ); }

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 offsetTop={76}>
      <ToastButtons />
    </ToastProvider>
  );
}

Result

Loading...

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> ); }

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

Loading...

Props

The object structure for individual Toasts passed into showToast:

Name	Type	Default
title * A short headline	string	—
offsetTop Adjust the distance to the top of the screen	number	16
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.