React Hooks

Flaggr provides React hooks for declarative feature flag evaluation in your components.

Setup

Wrap your app with the Flaggr provider:

import { FlaggrProvider } from '@flaggr/client'
 
function App() {
  return (
    <FlaggrProvider
      config={{
        mode: 'remote',
        apiUrl: 'https://api.flaggr.dev',
        serviceId: 'web-app',
        apiKey: 'flg_your_token',
      }}
    >
      <YourApp />
    </FlaggrProvider>
  )
}

Hook Reference

useBooleanFlag(key, defaultValue)

Returns a boolean flag value. Re-renders when the flag changes.

const isEnabled = useBooleanFlag('feature-x', false)

useStringFlag(key, defaultValue)

Returns a string flag value.

const variant = useStringFlag('checkout-flow', 'classic')

useNumberFlag(key, defaultValue)

Returns a numeric flag value.

const limit = useNumberFlag('rate-limit', 100)

useObjectFlag<T>(key, defaultValue)

Returns a typed object flag value.

interface Config {
  maxRetries: number
  timeout: number
}
 
const config = useObjectFlag<Config>('api-config', {
  maxRetries: 3,
  timeout: 5000,
})

Patterns

Feature Gating

function Dashboard() {
  const showAnalytics = useBooleanFlag('analytics-tab', false)
 
  return (
    <Tabs>
      <Tab label="Overview">...</Tab>
      {showAnalytics && <Tab label="Analytics">...</Tab>}
    </Tabs>
  )
}

A/B Testing

function HeroSection() {
  const variant = useStringFlag('hero-variant', 'A')
 
  switch (variant) {
    case 'A': return <HeroA />
    case 'B': return <HeroB />
    default: return <HeroA />
  }
}

Progressive Rollout

Combine percentage-based targeting in the dashboard with hooks in your code:

function CheckoutPage() {
  const useNewCheckout = useBooleanFlag('new-checkout', false)
 
  // The dashboard controls what percentage of users see this
  return useNewCheckout ? <CheckoutV2 /> : <CheckoutClassic />
}

Next→