@leancodepl/feature-flags-react-client

@leancodepl/feature-flags-react-client

React hooks for type-safe feature flag management using OpenFeature.

Installation

npm install @leancodepl/feature-flags-react-client
# or
yarn add @leancodepl/feature-flags-react-client

API

mkFeatureFlags(flags, provider)

Creates React hooks for type-safe feature flag management using OpenFeature.

Parameters:

• flags: TFlags - Feature flags configuration object with default values
• provider: Provider - OpenFeature provider instance

Returns: Object containing useFeatureFlag hook and FeatureFlagsProvider component

Usage Examples

Basic Setup (ConfigCat)

//featureFlags.ts
import { mkFeatureFlags } from "@leancodepl/feature-flags-react-client"
import { ConfigCatWebProvider } from "@openfeature/config-cat-web-provider"

const flags = {
  enableNewFeature: { defaultValue: false },
  maxRetries: { defaultValue: 3 },
}

const provider = ConfigCatWebProvider.create("sdk-key")
export const { FeatureFlagsProvider, useFeatureFlag } = mkFeatureFlags(flags, provider)

Basic Setup (PostHog)

//featureFlags.ts
import { mkFeatureFlags } from "@leancodepl/feature-flags-react-client"
import { OpenFeaturePosthogProvider } from "@leancodepl/openfeature-posthog-provider"
import posthog from "posthog-js"

const flags = {
  enableNewFeature: { defaultValue: false },
  maxRetries: { defaultValue: 3 },
}

posthog.init("YOUR_API_KEY")
const provider = new OpenFeaturePosthogProvider(posthog)
export const { FeatureFlagsProvider, useFeatureFlag } = mkFeatureFlags(flags, provider)

Component Usage

import React from 'react';
import { FeatureFlagsProvider, useFeatureFlag } from './featureFlags';

function App() {
  return (
    <FeatureFlagsProvider>
      <Dashboard />
    </FeatureFlagsProvider>
  );
}

function Dashboard() {
  const { value: isEnabled } = useFeatureFlag('enableNewFeature');
  const { value: retries } = useFeatureFlag('maxRetries');

  return (
    <div>
      {isEnabled ? <NewDashboard /> : <LegacyDashboard />}
      <div>Max retries: {retries}</div>
    </div>
  );
}

With Default Override

import React from 'react';
import { useFeatureFlag } from './featureFlags';

function Settings() {
  const { value: retries } = useFeatureFlag('maxRetries', 5);

  return <div>Retries: {retries}</div>;
}