翻转反应 SDK

Flipt React SDK 为集成提供了方便的方法 翻转 使用自定义钩和上下文提供者在您的 React 应用程序中添加特性标记。 它建在翻转上方 客户端评价 用于浏览器的客户端.

安装

npm install @flipt-io/flipt-client-react

先决条件

• 反应16.8.0或以上

使用量

使用"翻转回放"SDK有三种方式.

1. 使用 useFliptBoolean 将布林评价钩在被包在一个函数元件中的 FliptProvider。 。 。 .
2. 使用 useFliptVariant 将变量评价钩子装入一个 FliptProvider。 。 。 .
3. 使用 useFliptSelector 将自定义评价连接到包含在 FliptProvider。 。 。 .

[TIP] 寻找下一个JS支持吗 ? 看看我们 下一个 JS 示例 在主翻转.

翻转提供

首先,将您的申请或其中一部分与 FliptProvider数字 :

import { FliptProvider } from '@flipt-io/flipt-client-react';

function App() {
  return (
    <FliptProvider
      options={{
        environment: 'default',
        namespace: 'default',
        url: 'https://your-flipt-instance.com'
        // Add other configuration options as needed
      }}
    >
      {/* Your app components */}
    </FliptProvider>
  );
}

使用Flipt Boolean 钩

这个 useFliptBoolean 钩子简化了评价布尔特征旗的过程. 此钩必须用在由 FliptProvider 上下文. 如果当前无法评价特性旗(例如由于网络问题或数据缺失),则返回默认值.

import { useFliptBoolean } from '@flipt-io/flipt-client-react';

function MyComponent() {
  const result = useFliptBoolean('my-flag', false, 'user-123', {
    // additional context
  });
  const handleCheckFlag = async () => {
    console.log('Flag evaluation result:', result);
  };

  return (
    <div>
      <button onClick={handleCheckFlag}>Check Flag</button>
    </div>
  );
}

使用 FliptVariant 钩

这个 useFliptVariant 钩子简化了一个变种特征旗的评价过程. 此钩必须用在由 FliptProvider 上下文. 如果当前无法评价特性旗(例如由于网络问题或数据缺失),则返回默认值.

import { useFliptVariant } from '@flipt-io/flipt-client-react';

function MyComponent() {
  const result = useFliptVariant('my-flag', 'fallback', 'user-123', {
    // additional context
  });
  const handleCheckFlag = async () => {
    console.log('Flag evaluation result:', result);
  };

  return (
    <div>
      <button onClick={handleCheckFlag}>Check Flag</button>
    </div>
  );
}

使用 Flipt 选择钩

这个 useFliptSelector 钩子允许直接访问 Flipt 客户端,这样它就可以被用包在一个功能组件中使用 FliptProvider。 。 。 .

这对更复杂的评价或者在您想要调用Flipt客户端时有用.

[尖叫声] flipt-client-react 严重依赖 useSyncExternalStore 有钩子的 说明

import { useFliptSelector } from '@flipt-io/flipt-client-react';

function MyComponent() {
  const result = useFliptSelector((client, isLoading, error) => {
    const result = client?.evaluateBoolean('my-flag', 'user-123', {
      // additional context
    });
    console.log('Flag evaluation internals:', result, isLoading, error);
    return result?.enabled;
  });

  // Use the client to evaluate flags
  const handleCheckFlag = async () => {
    console.log('Flag evaluation result:', result);
  };

  return (
    <div>
      <button onClick={handleCheckFlag}>Check Flag</button>
    </div>
  );
}

初始化参数

这个 FliptProvider 组件接受两个可选参数:

• options: 实例 ClientOptions 类型,用于支持客户端的若干选项。 其结构是:
  • environment: 评价旗帜时所用的环境(Flipt v2)。 如果不提供,客户端将默认为 default 环境.
  • namespace: 获取旗下状态的命名空间 。 如果不提供,客户端将默认为 default 名称空间.
  • url: 上游翻转实例的 URL。 如果不提供,客户端将默认为 http://localhost:8080。 。 。 .
  • authentication: 与上游翻转实例通信时使用的认证策略。 如果不提供,客户端将默认为没有认证. 见 认证 用于提供更多信息.
  • updateInterval:从Flipt获取新状态的投票间隔(以秒计). 设定为 120 默认的秒。 A 类 0 值在初始获取后完全禁用投票.
  • reference编号: 参考文献 用于获取旗帜状态。 如果不提供参考文献,则不使用参考文献.
  • snapshot由JS客户端返回的 Base64 编码快照 getSnapshot() 方法。 用这个 errorStrategy: ErrorStrategy.Fallback 以允许启动,而 Flipt 是无法到达的.
  • errorStrategy: 获取错误的战略。 使用 ErrorStrategy.Fallback 与 snapshot 用于离线启动.
  • fetchMode数字 : FetchMode.Polling (违约)或 FetchMode.Streaming与 @flipt-io/flipt-client-js 0.7.0或更后,当客户端应用已改变的旗下状态时,包括流上更新时,组件会重新回复.
  • fetcher执行 获取器 界面,用于请求旗帜状态时。 如果没有提供,则使用浏览器的默认取取器 fetch API 密码 将被使用.

认证

这个 FliptProvider 构成部分支持下列认证战略:

• 无认证( 默认)
• 客户端托肯认证
• JWT 认证

带快照的离线启动

flipt-client-react 用途 @flipt-io/flipt-client-js 在引擎盖下,它支持同样的手动快照流. 自己储存快照,然后通过 FliptProvider 选项.

import { ErrorStrategy } from '@flipt-io/flipt-client-js';
import { FliptProvider, useFliptSelector } from '@flipt-io/flipt-client-react';

function PersistFliptSnapshot() {
  useFliptSelector((client) => {
    if (client) {
      localStorage.setItem('fliptSnapshot', client.getSnapshot());
    }
    return null;
  });

  return null;
}

function App() {
  const snapshot = localStorage.getItem('fliptSnapshot') ?? undefined;

  return (
    <FliptProvider
      options={{
        namespace: 'default',
        url: 'https://your-flipt-instance.com',
        snapshot,
        errorStrategy: ErrorStrategy.Fallback
      }}
    >
      <PersistFliptSnapshot />
      {/* Your app components */}
    </FliptProvider>
  );
}

如果启动抓取失败, 提供者会使用缓存快照 。 当Flipt可以到达时,新鲜状态将替换缓存快照并 getSnapshot() 返回最新状态.

实例

以下是一个更完整的实例,说明如何在您的应用程序中使用回放SDK:

import React from 'react';
import { FliptProvider, useFliptBoolean } from '@flipt-io/flipt-client-react';

// A custom component that renders its children if the feature flag is enabled
function FeatureFlag({ flagKey, entityId, children }) {
  const isEnabled = useFliptBoolean('flagKey', false, entityId, {
    // additional context
  });
  return isEnabled ? children : null;
}

function App() {
  return (
    <FliptProvider options={{ url: 'https://your-flipt-instance.com' }}>
      <h1>My App</h1>
      {/* Will render the children if the feature flag evaluation results in true */}
      <FeatureFlag flagKey="new-feature" entityId="user-123">
        <div>This is a new feature!</div>
      </FeatureFlag>
    </FliptProvider>
  );
}

export default App;

捐款

欢迎捐款! 请随意打开一个问题或提交拉出请求.

许可证

本项目根据以下规定获得许可证: MIT 许可证。 。 。 .