# @aminekun90/react-toast 中文文档

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

版本：1\.3\.0
npm 元数据更新时间：2026-10-20T17:09:24.682Z
中文译文更新时间：2026-11-06T00:32:46.553Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40aminekun90/react-toast
原文对照：https://npmcn.com/package/%40aminekun90/react-toast/?lang=original
项目主页：https://github.com/aminekun90/ngx-toast#readme
源码仓库：https://github.com/aminekun90/ngx-toast

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

- 包体积（解压后）：258 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-03-04T19:58:13.995Z
- 最新版本发布：2026-10-20T17:09:24.335Z
- 近 30 天下载量：76410（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

轻而易举的高性能 **基于钩子** 用于React 18 & 19. 的土司通知库.

## 安装

```sh
npm install @aminekun90/react-toast
```

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

## README

# @aminekun90/反应吐槽:

轻而易举的高性能 **基于钩子** 用于React 18 & 19. 的土司通知库.

[![React Version](https://img.shields.io/badge/react-%3E%3D18.0.0-blue.svg)](https://react.dev/) [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/aminekun90/ngx-toast/graphs/commit-activity) [![version number](https://img.shields.io/npm/v/@aminekun90/react-toast?color=green&label=version)](https://www.npmjs.com/package/@aminekun90/react-toast) [![License](https://img.shields.io/github/license/aminekun90/ngx-toast)](https://github.com/aminekun90/ngx-toast/blob/main/LICENSE) ![node-current](https://img.shields.io/node/v/@aminekun90/react-toast) [![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/@aminekun90/react-toast)

## 软件

[查看 React Demo](https://aminekun90.github.io/ngx-toast/react/)

> 与 Angular 库共享其核心引擎和样式表 [`@aminekun90/ngx-toast`](https://www.npmjs.com/package/@aminekun90/ngx-toast) ——行为和主题相同.

## 关键特性

-   ⚛️ **反应 18 & 19 准备**: 完全支持并联模式和最新反应特性.
-   ⚓ **基于 Hook 的 API**: 简单而直观 `useToast()` 钩入触发通知.
-   🎨 **FontAsome 整合**:专业相片被烤入.
-   ♿ **可访问**数字 : `role="alert"`, (中文(简体) ), `aria-live`,键盘解析(Enter/Space/Escape),焦点样式.
-   ⏸️ **暂停悬浮**: 计时器和进度栏在徘徊/聚焦时暂停.
-   🌙 **主题和暗模式**: 有5个内置主题,全CSS可变定制,自动暗模式.
-   🧩 **全局默认值**: 配置位置、 持续时间、 最大堆栈、 通过 `<ToastProvider config>`。 。 。 .
-   🔁 **承诺加载土司( L)**数字 : `loading()` 财务报告和审定财务报表 `promise()` 帮助交换位置.
-   📦 **小声**:小捆绑,与Vite最优化,0外跑时道克.

## 安装

通过 **雅伦**数字 :

```bash
yarn add @aminekun90/react-toast
```

## 同伴依赖关系

确保您安装了下列依赖性( 图标和对等比需要):

```bash
yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
```

## 配置

用 `ToastProvider`。 。 。 .

```tsx
import { ToastProvider } from '@aminekun90/react-toast';

export function App() {
  return (
    <ToastProvider> <!-- Mandatory -->
      <MyMainComponent />
    </ToastProvider>
  );
}
```

## 使用量

### 1\. 增加全球集装箱

设置 `ToastContainer` 在应用程序的根( 通常在 `App.tsx`) (中文(简体) ). 它将管理所有有效通知的堆放.

```tsx
import { ToastContainer } from '@aminekun90/react-toast';

export default function App() {
  return (
    <div className="app-root">
      <ToastContainer />
      <MyContent />
    </div>
  );
}
```

### 2\. 触发通知

使用 `useToast` 钩子在你体内的任何地方 `ToastProvider`。 。 。 .

```tsx
import { useToast } from '@aminekun90/react-toast';

export function MyComponent() {
  const { success, error, info, warning } = useToast();

  const handleAction = () => {
    success('Operation successful!', 'Success');
  };

  return <button onClick={handleAction}>Click me</button>;
}
```

### 3\. 全球缺省(可选)

```tsx
<ToastProvider config={{
  position: 'top-right',
  duration: 4000,
  pauseOnHover: true,
  maxToasts: 5,
  preventDuplicates: true,
  newestOnTop: true,
}}>
  <App />
</ToastProvider>
```

### 4\. 装入并许诺吐司

```tsx
const { loading, success, promise } = useToast();

const id = loading('Uploading…');
// later: success('Done!', undefined, { id });

await promise(saveUser(), {
  loading: 'Saving…',
  success: (user) => `Saved ${user.name}`,
  error: (err) => `Failed: ${err}`,
});
```

## API 参考

| 方法 | 回返 | 说明 |
| --- | --- | --- |
| `show(config)` | `number` | 显示祝酒词; 返回其ID 。 重用一个 `id` 随时更新. |
| `success/error/warning/info(message, title?, config?)` | `number` | 已键入快捷键 . |
| `loading(message, title?, config?)` | `number` | 不断加载吐司. |
| `promise(promise, msgs, config?)` | `Promise<T>` | 装入 – 成功/ 错误, 互换到位 . |
| `remove(id)` | `void` | 辞去一干一干. |
| `clear(position?)` | `void` | 解散所有的土司, 选择的位置. |
| `pause(id)` 编号 : `resume(id)` | `void` | 暂停/恢复自动解除计时器 . |

### 托斯特配置属性

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `type` | `'success' | 'error' | 'warning' | 'info' | 'loading'` | `'info'` | 视觉主题和图标. |
| `title` | `string` | `undefined` | 可选的大胆标题. |
| `message` | `string` | —— 说 | 主要文本内容. |
| `duration` | `number` | `5000` | 时间( 毫秒)`0` = 持续). |
| `position` | `ToastPosition` | `'bottom-right'` | 屏幕放置. |
| `progressBar` | `boolean` | `false` | 显示倒计时栏. |
| `progressAnimation` | `'increasing' | 'decreasing'` | `'increasing'` | 栏指向. |
| `icon` | `IconDefinition` | 按类型 | 自定义 FontAweome 图标 . |
| `toastClass` | `string` | `''` | 额外CSS课. |
| `pauseOnHover` | `boolean` | `true` | 暂停徘徊/聚焦. |
| `theme` | `string` | `undefined` | `material` | `glass` | `minimal` | `neon` | `solid` 或习惯. |

## 他们

5个内置主题,每个土司或全球适用;一切都是CSS可变的 为完全定制而驱动.

```tsx
success('Saved!', undefined, { theme: 'glass' });
```

```html
<body class="ngx-toast-theme-material">…</body>
```

\* 全文参考: [文件/主题.md](https://github.com/aminekun90/ngx-toast/blob/main/docs/THEMING.md) • 妇女 🏗️ [文献/档案](https://github.com/aminekun90/ngx-toast/blob/main/docs/ARCHITECTURE.md)

## 兼容性

| 软件包 | 反应版本 | 节点.js 版本 |
| --- | --- | --- |
| 1.0.x (中文(简体) ) | ^18.0.0 ^19.0 | ^22.x ^24.x |

## 保留此工程: coffee:

我花时间和精力维持这个图书馆。 如果有帮助,请考虑捐赠!

[通过 PayPal 捐款](https://paypal.me/aminebouzahar)

## 许可证

麻省理工学院执照,由Amine Bouzahar执导.

## 常见问题

### @aminekun90/react-toast 是什么？

轻而易举的高性能 基于钩子 用于React 18 & 19\. 的土司通知库\.

### 如何安装 @aminekun90/react-toast？

在项目目录运行 npm install @aminekun90/react-toast，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aminekun90/react-toast 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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