@flic/react

React bindings for Flic feature flags.

Installation

pnpm add @flic/react

Usage

Setup

Wrap your app with FlicProvider:

import { FlicProvider } from "@flic/react";

function App() {
  return (
    <FlicProvider
      apiKey="your-api-key"
      baseUrl="https://api.flic.dev"
      project="my-project"
      environment="production"
      context={{ userId: "user-123" }}
    >
      <MyComponent />
    </FlicProvider>
  );
}

useFlag

Get a single flag value:

import { useFlag } from "@flic/react";

function MyComponent() {
  // Boolean flag
  const darkMode = useFlag("dark-mode");

  // Typed flag with default
  const buttonColor = useFlag("button-color", "blue");

  return (
    <button style={{ backgroundColor: buttonColor }}>
      {darkMode ? "Dark" : "Light"}
    </button>
  );
}

useFlags

Get all flags with loading/error state:

import { useFlags } from "@flic/react";

function FlagList() {
  const { flags, isLoading, error } = useFlags();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {Object.entries(flags).map(([key, enabled]) => (
        <li key={key}>{key}: {enabled ? "on" : "off"}</li>
      ))}
    </ul>
  );
}

useFlic

Access the raw SDK client:

import { useFlic } from "@flic/react";

function AdvancedComponent() {
  const client = useFlic();

  const handleClick = () => {
    client?.updateContext({ plan: "premium" });
  };

  return <button onClick={handleClick}>Upgrade</button>;
}

API

FlicProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | API key | | baseUrl | string | Yes | API base URL | | project | string | Yes | Project slug | | environment | string | Yes | Environment name | | context | EvaluateContext | No | Initial context | | pollingInterval | number | No | Polling interval (ms) | | analytics | boolean \| AnalyticsConfig | No | Analytics config | | streaming | boolean \| StreamConfig | No | SSE streaming config |

Hooks

| Hook | Returns | Description | |------|---------|-------------| | useFlag(key) | boolean | Get boolean flag | | useFlag(key, default) | T | Get typed flag with default | | useFlags() | { flags, isLoading, error } | All flags + status | | useFlic() | Flic \| null | Raw SDK client |

Features

• Real-time updates via SSE
• Automatic re-render on flag changes
• Loading and error states
• Context updates trigger refetch
• React 18+ with useSyncExternalStore