Bucket 反应 SDK
反应客户端库 Bucket.co (英语)
Bucket 支持特性拖动、跟踪特性使用, 请求反馈 关于特征,以及 远程配置特性。 。 。 .
弹匣反射出SDK 内置工具栏 显示于 localhost 默认.
安装
通过 npm 安装 :
npm i @bucketco/react-sdk
开始吧
1. 添加 BucketProvider 上下文提供者
添加数据 BucketProvider 应用程序的上下文提供者 :
示例
import { BucketProvider } from "@bucketco/react-sdk";
<BucketProvider
publishableKey="{YOUR_PUBLISHABLE_KEY}"
company={{ id: "acme_inc", plan: "pro" }}
user={{ id: "john doe" }}
loadingComponent={<Loading />}
>
{/* children here are shown when loading finishes or immediately if no `loadingComponent` is given */}
</BucketProvider>;
2. 创建新功能并设置类型安全
安装 Bucket CLI :
npm i --save-dev @bucketco/cli
运行 npx bucket new 创建您的第一个功能!
在第一次运行时,它会签入 Bucket 并为您的项目设置类型生成:
❯ npx bucket new
Opened web browser to facilitate login: https://app.bucket.co/api/oauth/cli/authorize
Welcome to Bucket!
? Where should we generate the types? gen/features.d.ts
? What is the output format? react
✔ Configuration created at bucket.config.json.
Creating feature for app Slick app.
? New feature name: Huddle
? New feature key: huddle
✔ Created feature Huddle with key huddle (https://app.bucket.co/features/huddles)
✔ Generated react types in gen/features.d.ts.
[!注] 默认情况下,类型将生成于
gen/features.d.ts。 。 。 . 默认tsconfig.json文件include默认设置此文件, 但如果您tsconfig.json不同,请确保文件包含在include属性.
3. 使用 useFeature(<featureKey>) 以获取特性状态
使用 useFeature 部件中的钩子让您切换在/关闭时的特性并跟踪特性的使用:
示例
function StartHuddleButton() {
const {
isEnabled, // boolean indicating if the feature is enabled
track, // track usage of the feature
} = useFeature("huddle");
if (!isEnabled) {
return null;
}
return <button onClick={track}>Start huddle!</button>;
}
useFeature 可以帮助你做更多。 见完整的例子 useFeature 见下文。 。 。 .
设置 user 财务报告和审定财务报表 company
Bucket 确定特定特性的活性 user, (中文(简体) ), company,或 otherContext。 。 。 .
你把这些交给 BucketProvider 作为道具.
如果你提供 user 或者说 company 对象,它们必须至少包括 id 否则,它们将被完全忽略.
计外 id,您还必须提供您想要评估特性目标设定规则的附加条件.
属性不是 user 或者说 company 可用 otherContext 道具 (英语).
属性不能被嵌入(多等),必须是字符串,数字或布尔. 存在一些特殊属性:
name-- 显示名称user编号 :company, (中文(简体) ),email- 用户的电子邮件,avatar-- 用于user编号 :company阿凡达形象.
<BucketProvider
publishableKey={YOUR_PUBLISHABLE_KEY}
user={{ id: "user_123", name: "John Doe", email: "[email protected]" }}
company={{ id: "company_123", name: "Acme, Inc" }}
otherContext={{ completedSteps: [1, 4, 7] }}
>
<LoadingBucket>
{/* children here are shown when loading finishes */}
</LoadingBucket>
<BucketProvider>
检索特征及其目标信息 useFeature(key: string) 钩子(在下一节中说明).
注意获取 isEnabled 在返回的对象上 useFeature() 自动
生成一个 check 活动.
远程配置
远程配置是一种动态而灵活的配置应用程序外的特征行为的方法 — — 不需要重新配置它.
类似 isEnabled,使用 useFeature() 钩子,有一个 config 属性。 此配置由 Bucket 内部管理 。 其管理方式类似于对特性的管理方式,而不是
二进制 isEnabled 您可以拥有多个配置值,这些值被赋予不同的用户/公司.
开始远程配置
- 更新您的特性定义 :
import "@bucketco/react-sdk";
// Define your features by extending the `Features` interface in @bucketco/react-sdk
declare module "@bucketco/react-sdk" {
interface Features {
huddle: {
// change from `boolean` to an object which sets
// a type for the remote config for `questionnaire`
maxTokens: number;
model: string;
};
}
}
const {
isEnabled,
config: { key, payload },
} = useFeature("huddles");
// isEnabled: true,
// key: "gpt-3.5",
// payload: { maxTokens: 10000, model: "gpt-3.5-beta1" }
key 用于配置,但如果一个特性没有配置或没有配置值与上下文相匹配,则 key 将会是 undefined。在试图在应用程序中使用配置时,请检查此大小写. payload 是任意配置需要的可选 JSON 值.
注意,类似于 isEnabled,访问 config 在返回的对象上 useFeature() 自动
生成一个 check 活动.
<BucketProvider> 组件
这个 <BucketProvider> 初始化了 Bucket SDK,获取了功能并开始收听自动反馈调查事件. 该组件可以使用多个道具进行配置:
-
publishableKey用于连接提供者到一个 环境 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}在巴凯特上 寻找你的publishableKey下级 环境设置 在巴凯特, -
company, (中文(简体) ),user财务报告和审定财务报表otherContext组成 上下文 用于确定一个特性是否被启用.company财务报告和审定财务报表user上下文会自动传送到 Bucket 服务器,因此 Bucket app 可以显示哪些公司可以访问哪些特性等.[!注] 如果您指定
company和(或)user他们至少必须拥有id财产,否则将完全被忽略。 您还应当提供您想要评估特性目标的任何额外信息, -
fallbackFeatures: 指定 SDK 无法获取特性时要考虑哪些特性的字符串列表 。 可用两种形式提供:// Simple array of feature keys fallbackFeatures={["feature1", "feature2"]} // Or with configuration overrides fallbackFeatures: { "feature1": true, // just enable the feature "feature2": { // enable with configuration key: "variant-a", payload: { limit: 100, mode: "test" } } } -
timeoutMs: 从服务器获取特性时超时, 以毫秒计 . -
staleWhileRevalidate: 如果设置为true,将返回 stale 特性,同时在背景中重新绘制特性. -
expireTimeMs: 如果设置, 特性将在此期间在页面负载之间被缓存( 毫秒) . -
staleTimeMs: 如果staleWhileRevalidate真实,无法获取新特性. -
offline: 测试时或在本地开发环境中提供此选项,以避免与 Bucket 服务器联系. -
loadingComponent在 Bucket 提供者初始化时, 您可以指定一个要渲染的响应组件, 而不是孩子 。 如果你想要更多的控制 装入屏幕,useFeature()返回时isLoading您可以用来自定义加载体验 :function LoadingBucket({ children }) { const { isLoading } = useFeature("myFeature") if (isLoading) { return <Spinner /> } return children } //-- Initialize the Bucket provider <BucketProvider publishableKey={YOUR_PUBLISHABLE_KEY} /*...*/> <LoadingBucket> {/* children here are shown when loading finishes */} </LoadingBucket> <BucketProvider> -
enableTracking: 设定为false停止向 Bucket 发送跟踪事件和用户/公司更新。 假冒用户时有用(默认为true, (中文(简体) ), -
apiBaseUrl: Bucket API 的可选基址 。 使用此选项来覆盖默认 API 端点, -
appBaseUrl: Bucket 应用程序的可选基址. 使用此功能来覆盖默认的应用程序 URL, -
sseBaseUrl: 服务器-恒星事件的可选基址. 用它来覆盖默认的 SSE 端点, -
debug: 设定为true启用调试日志到控制台, -
toolbar: 可选 配置 为 Bucket 工具栏, -
feedback: 反馈收集的可选配置
钩子
useFeature()
返回当前上下文的给定特性状态。 钩子为特征旗帜及其配置提供了类型安全访问.
import { useFeature } from "@bucketco/react-sdk";
function StartHuddleButton() {
const {
isLoading, // true while features are being loaded
isEnabled, // boolean indicating if the feature is enabled
config: {
// feature configuration
key, // string identifier for the config variant
payload, // type-safe configuration object
},
track, // function to track feature usage
requestFeedback, // function to request feedback for this feature
} = useFeature("huddle");
if (isLoading) {
return <Loading />;
}
if (!isEnabled) {
return null;
}
return (
<>
<button onClick={track}>Start huddle!</button>
<button
onClick={(e) =>
requestFeedback({
title: payload?.question ?? "How do you like the Huddles feature?",
position: {
type: "POPOVER",
anchor: e.currentTarget as HTMLElement,
},
})
}
>
Give feedback!
</button>
</>
);
}
useTrack()
useTrack() 让您向 Bucket 发送自定义事件 。 用户使用此选项 用途 一个功能。 创建 特性 在 Bucket 中,基于这些事件分析特性使用.
返回向 Bucket 发送自定义事件的函数 。 用户使用此选项 用途 一个功能。 这些事件可用于分析地物用法,并创造出巴克特的新地物.
import { useTrack } from "@bucketco/react-sdk";
function StartHuddle() {
<div>
<button onClick={() => track("Huddle Started", { huddleType: "voice" })}>
Start voice huddle!
</button>
</div>;
}
useRequestFeedback()
返回一个函数,让您打开一个对话框来请求对特定特性的反馈。 这有助于收集关于具体特征的有针对性的反馈.
useRequestFeedback() 返回允许您打开对话框的函数,以询问特定特性的反馈.
见 自动反馈调查 如何自动操作,没有代码.
使用时 useRequestFeedback 您必须将特性密钥传递到 requestFeedback。 。 。 .
以下示例说明如何使用 position 以确保弹出器出现在“反馈!”按钮旁边.
import { useRequestFeedback } from "@bucketco/react-sdk";
function FeedbackButton() {
const requestFeedback = useRequestFeedback();
return (
<button
onClick={(e) =>
requestFeedback({
featureKey: "huddle-feature",
title: "How satisfied are you with file uploads?",
position: {
type: "POPOVER",
anchor: e.currentTarget as HTMLElement,
},
// Optional custom styling
style: {
theme: "light",
primaryColor: "#007AFF",
},
})
}
>
Give feedback!
</button>
);
}
见 反馈文档 更多信息,请访问infofinland上的 requestFeedback 选项.
useSendFeedback()
返回允许您向 Bucket 发送反馈的函数。 如果你通过自己的UI手动收集到反馈,并想要将其发送到Bucket,这个是有用的.
import { useSendFeedback } from "@bucketco/react-sdk";
function CustomFeedbackForm() {
const sendFeedback = useSendFeedback();
const handleSubmit = async (data: FormData) => {
await sendFeedback({
featureKey: "bucket-feature-key",
score: parseInt(data.get("score") as string),
comment: data.get("comment") as string,
});
};
return <form onSubmit={handleSubmit}>...</form>;
}
useUpdateUser(), (中文(简体) ), useUpdateCompany() 财务报告和审定财务报表 useUpdateOtherContext()
这些钩子返回函数可以使您更新当前设定的用户,公司或其他上下文的属性. 对用户/公司的更新被远程存储并影响特性瞄准,而"其他"上下文更新仅会影响当前会话.
import {
useUpdateUser,
useUpdateCompany,
useUpdateOtherContext,
} from "@bucketco/react-sdk";
function FeatureOptIn() {
const updateUser = useUpdateUser();
const updateCompany = useUpdateCompany();
const updateOtherContext = useUpdateOtherContext();
const handleUserUpdate = async () => {
await updateUser({
role: "admin",
betaFeatures: "enabled",
});
};
const handleCompanyUpdate = async () => {
await updateCompany({
plan: "enterprise",
employees: 500,
});
};
const handleContextUpdate = async () => {
await updateOtherContext({
currentWorkspace: "workspace-123",
theme: "dark",
});
};
return (
<div>
<button onClick={handleUserUpdate}>Update User</button>
<button onClick={handleCompanyUpdate}>Update Company</button>
<button onClick={handleContextUpdate}>Update Context</button>
</div>
);
}
注:更改 user.id 或者说 company.id,需要更新传递给 BucketProvider 而不是用这些钩子.
useClient()
返回 BucketClient 用于 BucketProvider。客户端提供了更多的功能
无法直接进入其他钩子.
import { useClient } from "@bucketco/react-sdk";
function LoggingWrapper({ children }: { children: ReactNode }) {
const client = useClient();
useEffect(() => {
client.on("check", (evt) => {
console.log(`The feature ${evt.key} is ${evt.value} for user.`);
});
}, [client]);
return children;
}
内容安全政策
见 社区支助方案 用于使用 Bucket React SDK 和 CSP 的信息
许可证
MIT 许可证
版权(c)2025 Bucket Aps