Toast

Toast represents lightweight feedback.

Toast only supports Imperative calls.

Toast.show("some content");

Example

Basic usage of Toast component.

Basic Toast
Click to show simple toast
Toast with Callback function (`RUI-log` in Console log)
Click to show toast with callback
import React from "react";
import { Toast, Button, Divider } from "../../index";
import { logInfo } from "../../experimental";

// Example FC
const Example = () => (
  <>
    <Divider contentAlign="left">Basic Toast</Divider>
    <Button size="small" inline onClick={() => Toast.show("Hello RUI")}>
      Click to show simple toast
    </Button>

    <Divider contentAlign="left">
      Toast with Callback function (`RUI-log` in Console log)
    </Divider>
    <Button
      size="small"
      inline
      onClick={() => {
        Toast.show({
          content: "Hello RUI + callback",
          afterClose: () => logInfo("callback: Toast afterClose"),
        });
      }}
    >
      Click to show toast with callback
    </Button>
  </>
);

export default Example;

Showcase more usage of Toast component.

import React from "react";
import { Toast, Button, Divider, Icon, Space } from "../../index";

// Example FC
const Example = () => (
  <>
    <Divider contentAlign="left">Toast with icon display</Divider>
    <Space vertical>
      <Button
        size="small"
        inline
        onClick={() => {
          Toast.show({
            icon: "success",
            content: "Publish done",
          });
        }}
      >
        Click to show toast with success icon
      </Button>
      <Button
        size="small"
        inline
        onClick={() => {
          Toast.show({
            icon: "fail",
            content: "Game over",
          });
        }}
      >
        Click to show toast with fail icon
      </Button>
      <Button
        size="small"
        inline
        onClick={() => {
          Toast.show({
            icon: "loading",
            content: "Loading data...",
          });
        }}
      >
        Click to show toast with loading icon
      </Button>
      <Button
        size="small"
        inline
        onClick={() => {
          Toast.show({
            icon: <Icon type="star" />,
            content: "Starry night",
          });
        }}
      >
        Click to show toast with customizable icon
      </Button>
    </Space>

    <Divider contentAlign="left">Toast with position</Divider>
    <Space vertical>
      <Button
        size="small"
        inline
        onClick={() => {
          Toast.show({
            content: "Top message",
            position: "top",
          });
        }}
      >
        Click to show toast with top position
      </Button>
      <Button
        size="small"
        inline
        onClick={() => {
          Toast.show({
            content: "Bottom message",
            position: "bottom",
          });
        }}
      >
        Click to show toast with bottom position
      </Button>
    </Space>

    <Divider contentAlign="left">Toast with mask not clickable</Divider>
    <Button
      size="small"
      inline
      onClick={() => {
        Toast.show({
          content: "Hold on (for 3s) please",
          maskClickable: false,
          duration: 3000,
        });
      }}
    >
      Click to show toast with bg mask not clickable
    </Button>
  </>
);

export default Example;

API

PropertiesDescriptionTypeDefault
afterCloseThe callback after the Toast is completely closed() => void-
contentThe Toast text contentReact.ReactNode-
durationPrompt duration, if it is 0, it will not be closed automaticallynumber2000
getContainerThe customized parent container of the light promptHTMLElement | (() => HTMLElement) | nulldocument.body
iconThe Toast icon'success' | 'fail' | 'loading' | React.ReactNode-
maskClassNameThe Toast mask class namestring-
maskClickableWhether allowed to click the backgroundbooleantrue
maskStyleThe Toast mask styleReact.CSSProperties-
positionVertical display position'top' | 'bottom' | 'center''center'
stopPropagationStop the propagation of some events.PropagationEvent[]['click']
ON THIS PAGE