FlagPilot

Use the React SDK to initialize FlagPilot, evaluate flags, pass target users, and handle fallback behavior in production.

Installation

Terminal

npm install @flagpilot/javascript @flagpilot/react

Initialization

App.tsx

import { FlagPilot } from '@flagpilot/javascript';
import { FlagPilotProvider, useFlag } from '@flagpilot/react';

const client = new FlagPilot({
  clientKey: 'fk_client_xxxx',
  environment: 'production'
});

function App() {
  return (
    <FlagPilotProvider client={client}>
      <CheckoutComponent />
    </FlagPilotProvider>
  );
}

function CheckoutComponent() {
  const { enabled, loading } = useFlag('checkout-redesign');

  if (loading) return <SkeletonLoader />;
  return enabled ? <NewCheckout /> : <LegacyCheckout />;
}

Evaluating a flag

App.tsx

const isEnabled = await flagpilot.evaluate('checkout-redesign', { userId: 'user_123' });

Target users

Send stable opaque user IDs and optional attributes to keep percentage rollouts and targeting rules consistent.

App.tsx

await flagpilot.evaluate('checkout-redesign', {
  userId: 'user_123',
  plan: 'pro'
});

Error handling

Use a conservative fallback value when evaluation fails or the SDK cannot reach its configured source.

Best practices

Reuse one SDK client instance per app runtime.
Set the SDK environment option to development, staging, or production.
Hash or pseudonymize sensitive user identifiers before sending them to evaluations.

API reference links

SDK integration guide REST API reference Target users SDK health telemetry

FAQ

How does React SDK interact with local caches?

Configurations are synced down using Edge Config or fallback REST triggers. The client automatically reads evaluations in-memory, resulting in sub-millisecond local evaluation times.

Where can I obtain support for React SDK?

You can open a support ticket in your dashboard, check the community roadmap, or consult the FlagPilot Platform Status page.