@blunode/feature-flags-react

React client for the BluNode feature flag service: <FeatureFlagProvider>, useFeatureFlags(), useFeatureFlag() and <FeatureFlag>.

pnpm add @blunode/feature-flags-react

Requires React 18 or 19, a reachable flag service and an environment-scoped API key. The key decides which environment (TEST / STAGE / QA / PROD) is evaluated.

import {
  FeatureFlagProvider,
  FeatureFlag,
  useFeatureFlags,
} from '@blunode/feature-flags-react';

<FeatureFlagProvider
  apiKey={process.env.NEXT_PUBLIC_FEATURE_FLAGS_API_KEY!}
  baseUrl={process.env.NEXT_PUBLIC_FEATURE_FLAGS_BASE_URL!}
  app="org"
  context={{ userId, tenantId, role }}
>
  <FeatureFlag flag="new-timetable" fallback={<LegacyTimetable />}>
    <NewTimetable />
  </FeatureFlag>
</FeatureFlagProvider>;

const { isEnabled, getVariant, ready } = useFeatureFlags();

Behaviour

• Evaluation happens on the server (POST /v1/evaluate); the browser only receives the resulting flag map for the given context, never the rules.
• Re-fetches on the interval the server sends in x-poll-interval-seconds, when context changes, and when the tab regains focus (refetchOnWindowFocus, default on).
• Keeps the last successful result if a refresh fails. Before the first success, isEnabled returns the default you pass (false if omitted).
• enabled={false} skips fetching (for example before login); localOverride supplies a static flag map for local development.

The components are marked 'use client' and work in the Next.js App Router.