# @fewchurs/react 中文文档

规范地址：https://npmcn.com/package/%40fewchurs/react/

版本：1\.7\.2
npm 元数据更新时间：2026-11-14T13:46:42.697Z
中文译文更新时间：2026-11-14T15:20:18.412Z
软件包许可：SEE LICENSE IN LICENSE

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

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

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

- 包体积（解压后）：653 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-10-19T06:34:42.901Z
- 最新版本发布：2026-11-14T13:46:42.539Z
- 近 30 天下载量：2025（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

任何 React app 的功能请求板 .

## 安装

```sh
npm install @fewchurs/react
```

也可以使用：`pnpm add @fewchurs/react`、`yarn add @fewchurs/react`、`bun add @fewchurs/react`

## README

# @ fewchurs/ 反应

任何 React app 的特性请求板: 访问者提交想法、投票、评论和跟随, 而你 管理所有从你的"数子"仪表板。 这个软件包有组件、钩子、样式和 获取客户端 .

**使用Next.js吗?** 使用 [`@fewchurs/next`](https://www.npmjs.com/package/@fewchurs/next) 换句话说 它让 将您的 API 密钥保留在浏览器中.

-   反应 18 或 19, 不需要运行时间依赖, 也不需要 Tailwind 或 CSS- in- JS
-   框外的光和暗模式
-   完全输入, 如果您想要自己的UI, 则使用无头模式和钩子

## 分为4个步骤

### 1\. 获取 API 密钥并添加您的域

在那个 [数子仪表板](https://www.fewchurs.com/)打开你的应用程序,复制 **API 密钥** (看起来像 `fr_live_…`并添加 **域名** 你的应用程序运行。 关键字只在您添加的域上工作 .

### 2\. 安装

```bash
npm install @fewchurs/react
# or: pnpm add @fewchurs/react
# or: yarn add @fewchurs/react
```

### 3\. 将钥匙放入环境变量

维特:

```dotenv
# .env
VITE_FEWCHURS_KEY=fr_live_…
```

创建反应应用 `process.env.REACT_APP_FEWCHURS_KEY`;任何其他捆绑者的工作方式相同. 编辑后重新启动 dev 服务器 `.env`。 。 。 .

### 4\. 董事会

```tsx
// src/App.tsx
import { FewchursBoard, FewchursProvider } from "@fewchurs/react";
import "@fewchurs/react/styles.css";

export function App() {
  return (
    <FewchursProvider apiKey={import.meta.env.VITE_FEWCHURS_KEY}>
      <FewchursBoard />
    </FewchursProvider>
  );
}
```

这就是整体整合。 运行您的应用程序和董事会 显示标签,投票,评论和 (单位:千美元) **新请求** 形式.

> 密钥是可被公布的,如花纹或PostHog公钥. 它受您所在区域的保护 加上和通过服务器侧速率限制,而不是保密. 如果你宁可不说出去, 将提供者指向自己的代理: `<FewchursProvider baseUrl="/api/fewchurs">`。 。 。 .

## 显示为按钮而非页面

`FewchursButton` 只有按钮。 单击它将棋盘作为工作表滑入(从侧面打开) 桌面,从手机底部). 打开前什么也拿不到.

```tsx
<FewchursProvider apiKey={import.meta.env.VITE_FEWCHURS_KEY}>
  <FewchursButton floating>Suggest a feature</FewchursButton>
</FewchursProvider>
```

| Prop | 它会做什么 |
| --- | --- |
| `floating` | 将按钮接入每页右下方 |
| `floating="left"` | 把它拉到左下方 |
| `children` | 你自己的标签。 默认是"退后" |
| `className`, (中文(简体) ), `style` | 扣上按钮 |
| 任意 `FewchursBoard` 道具 | 进入工作表内的棋盘 |

从自己的按钮打开工作表, 请使用 `FewchursBoardDialog` 与 `open`, (中文(简体) ), `onClose` 财务报告和审定财务报表 `variant="sheet"`离开 `variant` 为中心模式而出.

## 自定义

从默认开始,只有在需要的时候才会更深入.

**CSS 变量** (最快的方式匹配你的品牌):

```css
.fewchurs {
  --fw-primary: #ed5f18;
  --fw-radius: 12px;
  --fw-font: var(--font-sans);
  --fw-surface: #fff;
}
```

**道具 :**

```tsx
<FewchursBoard
  tabs={["top", "new", "roadmap"]} // default: ["top", "new"]
  defaultTab="top"
  showDeclined={false}
  allowComments
  emailField="optional"
  pageSize={20}
  theme={{ primary: "#0f766e", radius: 4 }}
  colorScheme="system" // "light" | "dark" | "system"
  labels={{ title: "Ideas", submit: "Suggest an idea" }}
/>
```

**槽数 :** `renderHeader`, (中文(简体) ), `renderEmpty` 财务报告和审定财务报表 `renderFeature` 替换部分棋盘. **无头:** 编曲 `FewchursBoard.Root`, (中文(简体) ), `.Tabs`, (中文(简体) ), `.List` 财务报告和审定财务报表 `.SubmitTrigger` 自己来,加 `unstyled` 以删除每个类名,或跳过组件并构建在下面的钩子上.

## 钩子

```tsx
const { features, isLoading, error, loadMore, hasMore } = useFeatures({ sort: "top" });
const { hasVoted, upvoteCount, toggle, isPending } = useVote(featureId);
const { comments, add, loadMore } = useComments(featureId);
const { submit, isPending } = useSubmitFeature();
const { isFollowing, follow, unfollow } = useFollow(featureId);
const { feature, isLoading, refresh } = useFeature(featureId);
const { showBranding, hideVoteCounts } = useFewchursConfig();
```

钩子必须在里面 `FewchursProvider`。它们从不扔出:每一次失败都是输入值 带有 `code` (单位:千美元)`invalid_key`, (中文(简体) ), `validation_failed`, (中文(简体) ), `rate_limited`, (中文(简体) ), `not_found`, (中文(简体) ), `limit_reached`, (中文(简体) ), `server`, (中文(简体) ), `network`),以及 `userMessage(error)` 把它变成一个句子 你可以显示.

## 直接链接到一个请求

```tsx
<FewchursBoard
  initialFeatureId={new URLSearchParams(location.search).get("request") ?? undefined}
/>
```

请求在清单上方附有公开的评论。 不再存在的id被忽略.

## 已签名的用户

选票是匿名的,并且与第一次使用时产生的设备代号挂钩。 投票的顺序是 账户跨设备,通过 a **散开** 用户编号。 永远不要通过原始身份或电子邮件地址.

```tsx
<FewchursProvider apiKey={key} deviceId={hashedUserId}>
```

## 分析

```tsx
<FewchursProvider apiKey={key} onEvent={(event) => track(event.name, event)}>
```

活动 : `boardOpened`, (中文(简体) ), `featureSubmitted`, (中文(简体) ), `voted`, (中文(简体) ), `commented`, (中文(简体) ), `followed`, (中文(简体) ), `error`。 。 。 .

## 解决问题

| 你瞧,你觉得呢 | 为什么,怎么办 |
| --- | --- |
| "没有建立" | 没有钥匙通过。 请检查env var 名称并重新启动 Dev 服务器 . |
| "无效 API 密钥" (401) | 钥匙错了 从仪表板上再复制一遍. |
| "无效API密钥"(403) | 域名未添加到您的应用程序中 。 信件指定要添加的域名 . |
| "你下线了" | 请求从未到达过数比彻斯. 检查网络和按 **再试一次**。 。 。 . |
| 董事会没有造型 | 你忘记了 `import "@fewchurs/react/styles.css"`。 。 。 . |

外部制作,每一次失败的请求都会被记录到控制台上作为 `[fewchurs] …`。 。 。 .

## 服务器安全条目

`@fewchurs/react/core` 没有反应和没有反应的一半 `"use client"` 边框:取取客户端 类型、验证和出错映射。 在服务器代码,工人或脚本中使用.

## 再来

-   完整指南和实例: [github.com/fewchurs/fewchurs-反应](https://github.com/fewchurs/fewchurs-react)
-   盘子和文件 : [www.fewchurs.com (中文(简体) )](https://www.fewchurs.com/)
-   更改日志 : [变动情况](https://github.com/fewchurs/fewchurs-react/blob/main/CHANGELOG.md)

## 许可证

专有. 您可以使用您自己的应用程序中的软件包连接到数位程序并自定义 通过所记录的道具,CSS变量,插槽和钩子. 见 [自由主义](https://npmcn.com/package/%40fewchurs/react/LICENSE)。 。 。 .

## 常见问题

### @fewchurs/react 是什么？

任何 React app 的功能请求板 \.

### 如何安装 @fewchurs/react？

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

### @fewchurs/react 支持 TypeScript 吗？

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

### @fewchurs/react 支持 ESM 还是 CommonJS？

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

### @fewchurs/react 可以商用吗？

@fewchurs/react 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @fewchurs/react 的下载量有多少？

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

### @fewchurs/react 还在维护吗？

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