Complete reference for the Flaggr TypeScript client SDK

Client SDK

The Flaggr client SDK provides type-safe feature flag evaluation for TypeScript and JavaScript applications.

Initialization

import { initializeFlaggr } from '@flaggr/client'
 
await initializeFlaggr({
  mode: 'remote',
  apiUrl: 'https://flaggr.dev',
  serviceId: 'my-service',
  apiKey: 'flg_your_api_token',
})

React Hooks

useBooleanFlag

import { useBooleanFlag } from '@flaggr/client'
 
function MyComponent() {
  const isEnabled = useBooleanFlag('dark-mode', false)
  return <div className={isEnabled ? 'dark' : 'light'}>...</div>
}

useStringFlag

import { useStringFlag } from '@flaggr/client'
 
function Banner() {
  const variant = useStringFlag('banner-variant', 'default')
  return <BannerComponent variant={variant} />
}

useNumberFlag

import { useNumberFlag } from '@flaggr/client'
 
function PricingPage() {
  const maxItems = useNumberFlag('cart-limit', 10)
  return <Cart maxItems={maxItems} />
}

useObjectFlag

import { useObjectFlag } from '@flaggr/client'
 
interface ThemeConfig {
  primary: string
  radius: number
}
 
function App() {
  const theme = useObjectFlag<ThemeConfig>('theme-config', {
    primary: '#3b82f6',
    radius: 8,
  })
  return <ThemeProvider config={theme}>...</ThemeProvider>
}

Event Subscriptions

onFlagChange

Listen for real-time flag updates:

import { onFlagChange } from '@flaggr/client'
 
const unsubscribe = onFlagChange('my-flag', (newValue) => {
  console.log('Flag changed:', newValue)
})
 
// Clean up
unsubscribe()

onProviderReady

Wait for the SDK to be fully initialized:

import { onProviderReady } from '@flaggr/client'
 
onProviderReady(() => {
  console.log('Flaggr SDK is ready')
})

onConnectionStateChange

Monitor the connection to the Flaggr backend:

import { onConnectionStateChange, ConnectionState } from '@flaggr/client'
 
onConnectionStateChange((state) => {
  if (state === ConnectionState.CONNECTED) {
    console.log('Connected to Flaggr')
  }
})

Evaluation Context

Pass user attributes for targeted flag evaluation:

import { setEvaluationContext } from '@flaggr/client'
 
setEvaluationContext({
  targetingKey: 'user-123',
  email: 'alice@example.com',
  plan: 'enterprise',
  region: 'au',
})

Context attributes are matched against targeting rules defined in the dashboard.

Bootstrap (SSR)

For server-rendered applications, bootstrap flag values to avoid flicker:

// Server-side
const flags = await evaluateAllFlags(serviceId)
 
// Pass to client via script tag
<script
  dangerouslySetInnerHTML={{
    __html: `window.__FLAGGR_BOOTSTRAP__ = ${JSON.stringify(flags)}`
  }}
/>

The SDK automatically picks up bootstrap data when available.

OpenFeature Integration

Use Flaggr as an OpenFeature provider:

import { OpenFeature } from '@openfeature/web-sdk'
import { FlaggrWebProvider } from '@flaggr/client'
 
const provider = new FlaggrWebProvider({
  apiUrl: 'https://flaggr.dev',
  serviceId: 'my-service',
  apiKey: 'flg_your_api_token',
})
 
await OpenFeature.setProviderAndWait(provider)
 
const client = OpenFeature.getClient()
const value = await client.getBooleanValue('my-flag', false)

Next→