# Toast

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/toast
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Lightweight feedback on the result of an operation that disappears without user action.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Lightweight feedback on the result of an operation that disappears without user action.

## When to Use

It is suitable for use when the change of page content cannot directly reflect the operation result.

## Demos

## Toast

### Imperative API

`Toast` only supports Imperative calls.

### Toast.show

The `show` method supports passing in a `props` object, which contains the following props:

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| afterClose | Callback after `Toast` is completely closed | `() => void` | - |
| content | `Toast` text content | `React.ReactNode` | - |
| duration | Prompt duration, if it is `0`, it will not be closed automatically | `number` | `2000` |
| getContainer | The customized parent container of the light prompt | `HTMLElement \| (() => HTMLElement) \| null` | `document.body` |
| icon | `Toast` icon | `'success' \| 'fail' \| 'loading' \| React.ReactNode` | - |
| maskClassName | `Toast` mask class name | `string` | - |
| maskClickable | Whether allowed to click the background | `boolean` | `true` |
| maskStyle | `Toast` mask style | `React.CSSProperties` | - |
| position | Vertical display position | `'top' \| 'bottom' \| 'center'` | `'center'` |
| stopPropagation | Stop the propagation of some events. | `PropagationEvent[]` | `['click']` |

> Only one light reminder is allowed to pop up at the same time, and the newly appeared `Toast` will squeeze out the previously displayed `Toast`.

You can also pass in a string directly, and `Toast.show` will automatically use it as `content`.

The return value of the `show` method is a component controller, which contains the following properties:

| Name  | Description                  | Type         | Default |
| ----- | ---------------------------- | ------------ | ------- |
| close | To close the current `Toast` | `() => void` | -       |

### Toast.clear

Turn off `Toast` in all displays.

### Toast.config

Methods for global configuration. Support `duration`, `position` and `maskClickable`. The configuration method is as follows:

```ts
Toast.config({ duration: 1000, position: 'top' })
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt