Skip to main content

Toast

Base​

Customization​

Without a message​

Use it when you need just a title, with few words.

Custom message​

Use the Toast.Text component to customize the Toast with links or buttons.

Button​

Custom icon​

The icon property allows you to insert one of the available icons into the toast. If you need a new icon, make a request to the Tangram team.

Kinds​

Each kind of Toast comes with a default icon related to it. To find out which type of Toast to use in each scenario, access our usage tab.

Primary​

Danger​

Warning​

Success​

Help​

Delay​

The Toast is not removed from the screen automatically, but it is possible to add a delay time so that it leaves the screen. This time must be added in milliseconds.

Without close option​

Does not allow Toast to be removed from the screen.

ToastProvider​

The Toast component has a provider that is used by the withToast HOC and the useToast hook. This provider can be instantiated only once at the highest level of the application and in tests.

danger

Avoid instantianting more than one ToastProvider in your application.

Add Multiple Toasts​

useToast​

Use the useToast hook to add more than one Toast or clear all added ones.

For more details on parameters and returns see the useToast API.

With withToast​

Another way to add more than one Toast and remove them all at once, is by using the High Order Component (HOC) withToast. This function receives a component which passes on the addToast and all the useToast’s function attributes.

import React from 'react';
import {
  withToast,
  ButtonGroup,
  Button
} from '@resultadosdigitais/tangram-components';
const MyDesiredToast = ({ addToast, clean }) => {
  const [count, setCount] = React.useState(0);

  const handleAddToast = () => {
    const newCount = count + 1;

    addToast({
      title: `Toast title ${newCount}`,
      message: `Toast message ${newCount}`
    });
    setCount(newCount);
  };

  return (
    <ButtonGroup>
      <Button kind={Button.kinds.secondary} onClick={handleAddToast}>
        Add Toast
      </Button>

      <Button kind={Button.kinds.tertiary} onClick={clean}>
        Clear Toasts
      </Button>
    </ButtonGroup>
  );
};

const ExampleHOC = withToast(MyDesiredToast);

export default ExampleHOC;

Feedback​