# @dt-dds/react-toast 中文文档

规范地址：https://npmcn.com/package/%40dt-dds/react-toast/

版本：1\.0\.0-beta\.138
npm 元数据更新时间：2026-11-13T11:46:11.468Z
中文译文更新时间：2026-11-13T01:59:47.760Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dt-dds/react-toast
原文对照：https://npmcn.com/package/%40dt-dds/react-toast/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：68.8 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=17\.0\.2，react-dom \>=17\.0\.2，@emotion/css ^11\.7\.1，@emotion/react ^11\.8\.2，@emotion/styled ^11\.8\.1
- 首次发布：2025-08-07T14:19:53.093Z
- 最新版本发布：2026-11-13T11:46:10.477Z
- 近 30 天下载量：2453（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：80（近 12 个月 47 个）

## 中文简介

Toast是一个弹出消息,用来向我们的用户显示相关信息.

## 安装

```sh
npm install @dt-dds/react-toast
```

也可以使用：`pnpm add @dt-dds/react-toast`、`yarn add @dt-dds/react-toast`、`bun add @dt-dds/react-toast`

## README

# 土司

Toast是一个弹出消息,用来向我们的用户显示相关信息.

## 图片参考

[图片](https://www.figma.com/design/kMk36nv0ZT4AHhBbw9jq0S/%E2%86%B3-1.-Daimler-Truck-DDS--Beta-?node-id=11943-5835&t=Q2vzJQbSCO9jHwxx-4)

## 使用量

```jsx
import { Toaster, ToastType, emitToast } from '@dt-dds/react';

const notify = () =>
  emitToast({
    title: 'success',
    message: 'myMEssage' + count,
    type: ToastType.Success,
    children: (
      <Tooltip>
        <Button onClick={() => console.log('clicked')}>Action 2</Button>
        <Tooltip.Content>Some tooltip</Tooltip.Content>
      </Tooltip>
    ),
  });

const App = () => {
  return (
    <div>
      <button onClick={notify}>Click me</button>
      <Toaster />
    </div>
  );
};
```

### 可自定义

这是一个非常定制的组件. 我们用的是 [反应- 热- 托斯克](https://react-hot-toast.com/) 为了控制我们的供应商 你可以检查 `react-hot-toast` 记录更多这方面的知识。 不过,如果您愿意,您可以创建供货商。 比如说你想创造一个新的道具 `autoHide`如果这个道具不真实, 你想让吐司无限期地在屏幕上.

```tsx
interface CallToastArgs {
  title: string;
  message: string;
  type: ToastType;
  autoHide: boolean;
}

export const ToasterContext = createContext({
  callToast: (args: CallToastArgs) => null,
});

const Toaster = ({ children }: { children: React.ReactNode }) => {
  const [toast, setToast] = useState<
    Partial<ToastProps> & { autoHide: boolean }
  >(null);

  const callToast = ({ title, message, type, autoHide }: CallToastArgs) =>
    setToast({
      id: Date.now().toString(),
      title,
      message,
      type,
      autoHide,
    });

  const close = () =>
    setToast((prevState) => ({ ...prevState, isVisible: false }));

  useEffect(() => {
    if (toast && toast.autoHide) {
      const timer = setTimeout(() => close(), 1000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  return (
    <ToasterContext.Provider value={{ callToast }}>
      {children}
      <div style={{ position: 'fixed', bottom: 10, left: 10 }}>
        {toast && (
          <Toast
            key={toast.id}
            id={toast.id}
            type={toast.type}
            title={toast.title}
            message={toast.message}
            isVisible={toast.isVisible}
            onClose={close}
          />
        )}
      </div>
    </ToasterContext.Provider>
  );
};

const App = () => {
  return (
    <Toaster>
      <MyComponent />
    </Toaster>
  );
};

const MyComponent = () => {
  const { callToast } = useContext(ToasterContext);

  return (
    <Button
      onClick={() =>
        callToast({
          message: 'myMEssage' + count,
          type: ToastType.Success,
          title: 'success',
          autoHide: false,
        })
      }
    >
      Clicked Me
    </Button>
  );
};
```

## API 密码

### 烤面包机

| 财产 | 类型 | 默认 | 说明 |
| --- | :-- | :-- | :-- |
| `toastOptions` | `DefaultToastOptions` | \- 说吧 | 这些将成为所有土司的默认选项. 见文件 [这里](https://react-hot-toast.com/docs/toast)。 。 。 . |
| `reverseOrder` | `boolean` | \- 说吧 | 土司在顶端产卵 默认。 如果你想在最后再敬酒,就说对了. |
| `gutter` | `number` | 第8条 | 改变每个土司之间的差距. |
| `containerStyle` | `React.CSSProperties` | \- 说吧 | 定制烤面包机 div 的样式 。 这可以用来改变所有土司的偏移 |
| `containerClassName` | `string` | 未定义 | 添加自定义的 CSS 类名到 toaster div . |
| `children` | `(toast: Toast) => JSX.Element` | \- 说吧 | 你可以定制每个土司的展示方式 将自己的制作功能 传给土司作为孩子。 每一个土司都使用这个功能, 注意:如果渲染的组件是一个按钮,其样式将被默认样式所压倒. |

### 发出祝词

| 财产 | 类型 | 默认 | 说明 |
| --- | :-- | :-- | :-- |
| `type` | `enum<ToastType>` | \- 说吧 | 设置变体土司 ("成功",".","N") |
| `title` | `string` | \- 说吧 | 要显示的标题 |
| `message` | `string` | \- 说吧 | 要显示的消息 |
| `dismissable` | `boolean` | 真实 | 设置关闭按钮的能见度, 该按钮将点出关闭回调 |
| `children` | `ReactNode` | \- 说吧 | 内容部分结尾处将提供的孩子 |

出自Toast可选词. 它们将覆盖从 `<Toaster />`。例如:

| 财产 | 类型 | 默认 | 说明 |
| --- | :-- | :-- | :-- |
| `duration` | `number` | 成功: 4000, 错误: 无穷 | 连续展示祝酒词 |
| `style` | `CSSProperties` | \- 说吧 | 直接在土司上添加cs. |

您可以检查所有 Toast 选项 [这里](https://react-hot-toast.com/docs/toast)。 。 。 . 土司的位置是固定的,在小屏幕上,它会位于下方中心并会位于大屏幕上,右下方. 任何一种土司的默认持续时间为4000ms. 对于错误类型,持续时间是无限的.

### 辞退

| 财产 | 类型 | 默认 | 说明 |
| --- | :-- | :-- | :-- |
| `toastId` | `string` | \- 说吧 | 祝酒词要撤销 |

### 土司

| 财产 | 类型 | 默认 | 说明 |
| --- | :-- | :-- | :-- |
| `id` | `string` | \- 说吧 | 敬酒标识符 |
| `dataTest` | `string` | \- 说吧 | 定义数据测试的值 |
| `title` | `string` | \- 说吧 | 要显示的标题 |
| `message` | `string` | \- 说吧 | 要显示的消息 |
| `onClose` | `string` | \- 说吧 | 关闭按钮被发射时的回叫. |
| `type` | `enum<ToastType>` | \- 说吧 | 设置变体土司 ("成功",".","N") |
| `isVisible` | `boolean` | 真实 | 设定吐司的能见度并触发淡出效果 |
| `dismissable` | `boolean` | 真实 | 设置关闭按钮的能见度, 该按钮将点出关闭回调 |
| `children` | `ReactNode` | \- 说吧 | 内容部分结尾处要渲染的子组件, 这可以用来接收动作按钮 |

### 堆栈

-   [类型脚本](https://www.typescriptlang.org/) 用于静态类型检查
-   [反应](https://reactjs.org/) — JavaScript 用户界面库
-   [情感](https://emotion.sh/docs/introduction) 用于使用 JavaScript 写入 Css 样式
-   [故事书](https://storybook.js.org/) ——由Vite供电的UI组件环境
-   [欢乐](https://jestjs.io/) - JavaScript 测试框架
-   [反应测试库](https://testing-library.com/) - 以用户为中心测试用户界面组件
-   [ESLint 语录](https://eslint.org/) 代码林入
-   [高级](https://prettier.io/) 用于代码格式
-   [苏普](https://github.com/egoist/tsup) - 由Esbuild供电的脚本捆绑机
-   [雅伦](https://yarnpkg.com/) 从管理软件包

### 图标

-   `yarn build` - 制作软件包
-   `yarn dev` - 在当地运行软件包
-   `yarn lint` - 将所有文件输入此软件包
-   `yarn test` - 测试所有单位
-   `yarn test:report` - 打开测试覆盖报告
-   `yarn test:update:snapshot` - 进行所有单元测试并更新快照

### 汇编

运行 `yarn build` 从软件包的根部 [齐声](https://tsup.egoist.dev/) 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .

这个 `/dist` 文件夹包含编译输出.

```bash
toast
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

### 版本

跟着 [语义版本](https://semver.org/)

## 许可证

许可证根据 [MIT 许可证](https://npmcn.com/package/%40dt-dds/react-toast/LICENSE)

## 常见问题

### @dt-dds/react-toast 是什么？

Toast是一个弹出消息,用来向我们的用户显示相关信息\.

### 如何安装 @dt-dds/react-toast？

在项目目录运行 npm install @dt-dds/react-toast，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17\.0\.2）、react-dom（\>=17\.0\.2）、@emotion/css（^11\.7\.1）、@emotion/react（^11\.8\.2）、@emotion/styled（^11\.8\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dt-dds/react-toast 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dt-dds/react-toast 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dt-dds/react-toast 可以商用吗？

@dt-dds/react-toast 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dt-dds/react-toast 的下载量有多少？

根据 npm 官方下载统计，@dt-dds/react-toast 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,453 次，日均约 82 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dt-dds/react-toast 还在维护吗？

最新版本 1\.0\.0-beta\.138 发布于 2026/11/13（今天）；至今共发布 80 个版本，其中过去 12 个月发布了 47 个；首次发布于 2025/08/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。