@ featureflip/反应
反应约束 特性flip 特征旗评价.
安装
npm install @featureflip/react @featureflip/browser
快速启动
包装您的应用程序 FeatureflipProvider,然后使用 useFeatureFlag 在任何组件.
import { FeatureflipProvider, useFeatureFlag } from '@featureflip/react';
function App() {
return (
<FeatureflipProvider clientKey="your-client-sdk-key">
<Banner />
</FeatureflipProvider>
);
}
function Banner() {
const showBanner = useFeatureFlag('show-banner', false);
if (!showBanner) return null;
return <div>New feature available!</div>;
}
提供者道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
clientKey | string | (必须) | 客户端 SDK 密钥 |
context | Record<string, unknown> | undefined | 评价背景(用户属性) |
baseUrl | string | undefined | 评价 API 基础 URL |
streaming | boolean | undefined | 启用 SSE 流线 |
sendEvaluationEvents | boolean | true | 被传递到浏览器SDK;参见其README. |
bootstrap | Record<string, unknown> | 'localStorage' | undefined | 第一个服务器响应前要渲染的值 。 被传递到浏览器SDK;参见其README. |
提供者创建 FeatureflipClient 内部和电话 initialize() 上马了 它清理(呼叫) close()在卸载.
与一个 bootstrap 对象(例如,旗下值您在渲染页面时评价的服务器), useFeatureFlag 返回第一个参数上的这些值,并 useFeatureflipStatus() 报告 isReady: true 立即; 服务器的值在到达时替换 。 在服务器渲染提供者使用时 FeatureflipClient.forServerRender,它只服务于拖曳值,不提出请求,也不在请求之间共享.
钩子
useFeatureFlag<T>(key: string, defaultValue: T): T
返回旗的估值值。 当旗帜值通过流转而改变时,组件会自动重递,或者 identify()类型 defaultValue 确定使用哪种变异方法(boolVariation, (中文(简体) ), stringVariation, (中文(简体) ), numberVariation,或 jsonVariation) (中文(简体) ).
const enabled = useFeatureFlag('new-checkout', false);
const color = useFeatureFlag('button-color', 'blue');
const limit = useFeatureFlag('rate-limit', 100);
const config = useFeatureFlag('ui-config', { sidebar: true });
useFeatureflipStatus(): { isReady, isError, error }
返回客户端初始化状态 。 用于显示装入状态 .
function App() {
const { isReady, isError, error } = useFeatureflipStatus();
if (isError) return <div>Error: {error?.message}</div>;
if (!isReady) return <div>Loading...</div>;
return <Main />;
}
useFeatureflipClient(): FeatureflipClient
返回基础 FeatureflipClient 例如: identify) (中文(简体) ).
在登录时识别
当上下文道具改变时,提供者会自动调用 identify() 并重新评价所有旗帜。 您也可以打电话 identify 直接说.
function LoginPage() {
const client = useFeatureflipClient();
async function handleLogin(userId: string) {
// ... authenticate ...
await client.identify({ user_id: userId, plan: 'pro' });
}
return <button onClick={() => handleLogin('123')}>Log in</button>;
}
测试
使用 TestFeatureflipProvider 在测试中提供预定的旗帜值——没有网络呼叫,没有初始化延迟.
import { TestFeatureflipProvider } from '@featureflip/react';
import { render, screen } from '@testing-library/react';
test('renders banner when flag is on', () => {
render(
<TestFeatureflipProvider flags={{ 'show-banner': true }}>
<Banner />
</TestFeatureflipProvider>,
);
expect(screen.getByText('New feature available!')).toBeInTheDocument();
});
TestFeatureflipProvider 用途 FeatureflipClient.forTesting() 内部和设定 isReady: true 马上.
许可证
阿帕奇 - 2.0