@ fewchurs/ 反应
任何 React app 的特性请求板: 访问者提交想法、投票、评论和跟随, 而你 管理所有从你的"数子"仪表板。 这个软件包有组件、钩子、样式和 获取客户端 .
使用Next.js吗? 使用 @fewchurs/next 换句话说 它让
将您的 API 密钥保留在浏览器中.
- 反应 18 或 19, 不需要运行时间依赖, 也不需要 Tailwind 或 CSS- in- JS
- 框外的光和暗模式
- 完全输入, 如果您想要自己的UI, 则使用无头模式和钩子
分为4个步骤
1. 获取 API 密钥并添加您的域
在那个 数子仪表板打开你的应用程序,复制 API 密钥 (看起来像
fr_live_…并添加 域名 你的应用程序运行。 关键字只在您添加的域上工作 .
2. 安装
npm install @fewchurs/react
# or: pnpm add @fewchurs/react
# or: yarn add @fewchurs/react
3. 将钥匙放入环境变量
维特:
# .env
VITE_FEWCHURS_KEY=fr_live_…
创建反应应用 process.env.REACT_APP_FEWCHURS_KEY;任何其他捆绑者的工作方式相同.
编辑后重新启动 dev 服务器 .env。 。 。 .
4. 董事会
// 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 只有按钮。 单击它将棋盘作为工作表滑入(从侧面打开)
桌面,从手机底部). 打开前什么也拿不到.
<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 变量 (最快的方式匹配你的品牌):
.fewchurs {
--fw-primary: #ed5f18;
--fw-radius: 12px;
--fw-font: var(--font-sans);
--fw-surface: #fff;
}
道具 :
<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 以删除每个类名,或跳过组件并构建在下面的钩子上.
钩子
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) 把它变成一个句子 你可以显示.
直接链接到一个请求
<FewchursBoard
initialFeatureId={new URLSearchParams(location.search).get("request") ?? undefined}
/>
请求在清单上方附有公开的评论。 不再存在的id被忽略.
已签名的用户
选票是匿名的,并且与第一次使用时产生的设备代号挂钩。 投票的顺序是 账户跨设备,通过 a 散开 用户编号。 永远不要通过原始身份或电子邮件地址.
<FewchursProvider apiKey={key} deviceId={hashedUserId}>
分析
<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-反应
- 盘子和文件 : www.fewchurs.com (中文(简体) )
- 更改日志 : 变动情况
许可证
专有. 您可以使用您自己的应用程序中的软件包连接到数位程序并自定义 通过所记录的道具,CSS变量,插槽和钩子. 见 自由主义。 。 。 .