# @dloizides/ui-feedback 中文文档

规范地址：https://npmcn.com/package/%40dloizides/ui-feedback/

版本：1\.22\.0
npm 元数据更新时间：2026-11-09T23:02:31.180Z
中文译文更新时间：2026-11-12T12:49:38.183Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：560 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：3 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0，react-native \>=0\.74\.0
- 首次发布：2026-06-15T20:09:28.365Z
- 最新版本发布：2026-11-09T23:02:31.029Z
- 近 30 天下载量：3373（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：28（近 12 个月 28 个）

## 中文简介

”错误状态、空列表状态、装入Fallback、PageSkeleton、VidentDialog QQ”通过一个小的可注入主题/翻译提供者接通。 dloizides.com部分共享UI套装.

## 安装

```sh
npm install @dloizides/ui-feedback
```

也可以使用：`pnpm add @dloizides/ui-feedback`、`yarn add @dloizides/ui-feedback`、`bun add @dloizides/ui-feedback`

## README

# @dloizides/ ui- feedback (英语)

(原始内容存档于2013-10-12). Themable, Brand-anoistic React Introduction (RN-web) **反馈** 组件 dloizides.com 投资组合. 组件读取主题颜色并翻译副本 一个小的可注入提供者,所以每个应用程序都提供自己的主题+i18n 软件包取决于任何应用程序的内部.

## 构成部分

| 构成部分 | 目的 |
| --- | --- |
| `ErrorState` | 带有可选重试按钮的普通错误消息 . |
| `EmptyListState` | 带有可选导航呼叫到动作的空收集消息 . |
| `LoadingFallback` | 轻量级自旋器 `React.lazy` 编号 : `Suspense` 边框. |
| `PageSkeleton` | 用于满页负载的闪光骨架(列表或卡式变体). |
| `ConfirmDialog` | 具有破坏性+加载状态的 Modal 确认/取消对话框 . |
| `ToastHost` | 倾斜相叠; 与 `createToastBus()`。 。 。 . |
| `WarmingOverlay` | 上面写着"暖起来" 上面写着. |
| `AppErrorBoundary` | 带有主题的顶级错误边界, 已宣布倒计时 . |

## 帮助者

| 帮助 | 目的 |
| --- | --- |
| `createToastBus()` | 框架不可知的土司喷出公共汽车 `ToastHost` `subscribe` 端口 . |

## 安装

```bash
npm install @dloizides/ui-feedback
```

同伴依赖性 : `react >= 18`, (中文(简体) ), `react-native >= 0.74` (使用时 `react-native-web` ) (中文(简体) ).

## 设置

挂载 `FeedbackUiProvider` 一次,高 在你的树, **下级** 您的应用程序本身的主题 供养. 适应本地 `useTheme()` + 向提供者翻译助手 :

```tsx
import { FeedbackUiProvider } from '@dloizides/ui-feedback';
import { useRouter } from 'expo-router';
import { FM } from './localization/helpers';
import { useTheme } from './theme/hooks/useTheme';

const FeedbackUiAdapter = ({ children }: { children: React.ReactNode }) => {
  const { theme } = useTheme();
  const router = useRouter();
  return (
    <FeedbackUiProvider theme={theme} t={FM} navigate={(route) => router.push(route)}>
      {children}
    </FeedbackUiProvider>
  );
};
```

注射时 `theme` 仅需 `colors.{background,surfaceElevated,text,textSecondary,border}`, (中文(简体) ), `palette.primary['500']` 财务报告和审定财务报表 `semantic.error['500']` - 任何与这些主题有关的已解决的主题 字段在结构上兼容.

## 使用量

```tsx
import { ErrorState, ConfirmDialog, LoadingFallback } from '@dloizides/ui-feedback';

<ErrorState message="Could not load data" onRetry={refetch} />
<LoadingFallback fullScreen />
<ConfirmDialog
  visible={open}
  title="Delete item?"
  message="This cannot be undone."
  destructive
  onConfirm={onDelete}
  onCancel={() => setOpen(false)}
/>
```

## 敬酒—— `createToastBus()`

土司管道是两分之一: `createToastBus()` **发射**, (中文(简体) ), `<ToastHost>` **调制**。 。 。 . 公交车 `subscribe` _实值_ 主持人的 `subscribe` 端口 .

公交车是 **框架 -- -- 故意不可知** ——没有反应导入,没有钩子,没有提供者——所以 React Query突变回调可以举起道具,在范围中没有组件上下文. 它携带 无样式( n)`ToastHost` 主题来自提供者的每个祝词),您通过的案文已经 由您本地化; 巴士从未看到翻译密钥 .

```ts
// src/lib/toastBus.ts — one module-level instance per app
import { createToastBus } from '@dloizides/ui-feedback';
export const toastBus = createToastBus();
```

```tsx
// once, in the shell:
<ToastHost subscribe={toastBus.subscribe} />

// anywhere — no provider needed:
useMutation({ onSuccess: () => toastBus.success(FM('menu.saved')) });
toastBus.error(FM('menu.saveFailed'));
toastBus.warning(FM('menu.needsReview'));
toastBus.emit(FM('menu.queued'), 'info');   // explicit type; defaults to 'info'
```

与没有宿主搭载的机体共鸣是无声无息的. 每个订阅者都收到每封邮件 `subscribe` 返回未订阅者.

## 错误边界 - `<AppErrorBoundary>`

把你的应用程序包起来一次 倒计时使 `ErrorState`,所以它的主题 从提供者, 它会宣布自己`role="alert"` + 键 `accessibilityLiveRegion="assertive"`) (中文(简体) ).

```tsx
<AppErrorBoundary
  labels={{ title: FM('errorBoundary.title'), message: FM('errorBoundary.message') }}
  showDetails={__DEV__}
  onError={(error, info) => captureException(error, { extra: { componentStack: info.componentStack } })}
  recover={(error) => isChunkLoadError(error) && attemptChunkRecovery()}
  onReload={reloadPage}
>
  <App />
</AppErrorBoundary>
```

| Prop | 目的 |
| --- | --- |
| `onError(error, info)` | 报告汇 (哨兵/伐木工)。 请求 **每个** 错误 : `recover`。 。 。 . |
| `recover(error)` | 返回时 `true` 如果被处理(例如,正在重新加载) − 显示 `updating` 屏幕,而不是错误屏幕. |
| `showDetails` | 在倒计时中渲染错误消息( dev- only) 。 默认 `false`。 。 。 . |
| `labels` | 部分, **地点化** `ErrorBoundaryLabels`; 省略的任何东西都使用英语默认值 `DEFAULT_ERROR_BOUNDARY_LABELS`。 。 。 . |
| `testIDPrefix` | 每个测试ID的前缀 。 默认 `error-boundary`。 。 。 . |
| `fallback(state)` | 逃出舱门——完全取代了内置后退. 接收 `{ error, recovering, retry }`。 。 。 . |
| `onReload` | 可选中学 **重新装入** 行动。 工具从不碰 `window`重装. |

该套件导入了没有i18n的运行时间——在呼叫站点本地化并传递字符串.

## i18n 键

部件叫注射器 `t(key)` 带有这些密钥( 在每个应用程序中提供这些密钥) 语言文件 : `common.retry`, (中文(简体) ), `common.retryHint`, (中文(简体) ), `common.confirm`, (中文(简体) ), `common.cancel`, (中文(简体) ), `common.confirmHint`, (中文(简体) ), `common.cancelHint`, (中文(简体) ), `loadingFallback.label`, (中文(简体) ), `loadingFallback.hint`, (中文(简体) ), `pageSkeleton.loadingLabel`, (中文(简体) ), `pageSkeleton.loadingHint`。 。 。 . `EmptyListState` 把钥匙当作道具.

## 测试ID

默认测试ID( E)`FEEDBACK_TEST_IDS`匹配已经使用的消费应用程序的字符串, 因此,现有的 Playwright 选择器继续工作 : `error-state`, (中文(简体) ), `error-state-retry`, (中文(简体) ), `empty-list-cta`, (中文(简体) ), `loading-fallback`, (中文(简体) ), `page-skeleton`, (中文(简体) ), `confirm-dialog`, (中文(简体) ), `confirm-button`, (中文(简体) ), `cancel-confirm-button`, (中文(简体) ), `notification-toast`, (中文(简体) ), `warming-overlay`, (中文(简体) ), `error-boundary`。 。 。 .

`AppErrorBoundary` 其编号来源于 `testIDPrefix` (默认) `error-boundary`),保留 选择所用的应用程序本地副本 : `error-boundary`, (中文(简体) ), `error-boundary-message`, (中文(简体) ), `error-boundary-details`, (中文(简体) ), `error-boundary-retry-button`, (中文(简体) ), `error-boundary-reload-button`, (中文(简体) ), `error-boundary-updating`。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @dloizides/ui-feedback 是什么？

”错误状态、空列表状态、装入Fallback、PageSkeleton、VidentDialog QQ”通过一个小的可注入主题/翻译提供者接通。 dloizides\.com部分共享UI套装\.

### 如何安装 @dloizides/ui-feedback？

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

### @dloizides/ui-feedback 支持 TypeScript 吗？

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

### @dloizides/ui-feedback 支持 ESM 还是 CommonJS？

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

### @dloizides/ui-feedback 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @dloizides/ui-feedback 可以商用吗？

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

### @dloizides/ui-feedback 的下载量有多少？

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

### @dloizides/ui-feedback 还在维护吗？

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