@flagswift/react-client

Official React client SDK for FlagSwift feature flags.

Installation

npm install @flagswift/react-client

Quick Start

'use client'

import { FlagProvider, FlagClient } from '@flagswift/react-client'

const client = new FlagClient({
  apiKey: process.env.NEXT_PUBLIC_FLAGSWIFT_API_KEY!,
  environment: 'production',
})

export function Providers({ children }: { children: React.ReactNode }) {
  return <FlagProvider client={client}>{children}</FlagProvider>
}

import { useFlag } from '@flagswift/react-client'

function MyComponent() {
  const isEnabled = useFlag('new-dashboard')
  return isEnabled ? <NewDashboard /> : <OldDashboard />
}

API

FlagClient

new FlagClient({
  apiKey: string,          // required — client key (fs_client_...)
  environment: string,     // required
  userIdentifier?: string | string[],
  baseUrl?: string,
})

FlagProvider

Wraps your app and makes flags available via context.

<FlagProvider client={client}>{children}</FlagProvider>

useFlag(flagName: string): boolean

Returns whether a flag is enabled.

useFlagMeta(flagName: string)

Returns { enabled, loading, error } — useful for handling loading states and avoiding hydration mismatches in Next.js.

const { enabled, loading, error } = useFlagMeta('analytics-dashboard')

if (loading) return <LoadingSpinner />
if (error) return <StandardDashboard />
return enabled ? <AnalyticsDashboard /> : <StandardDashboard />

useFlagContext()

Returns { flags, isEnabled, loading, error } — access all flags at once.

Multi-user targeting

const client = new FlagClient({
  apiKey: process.env.NEXT_PUBLIC_FLAGSWIFT_API_KEY!,
  environment: 'production',
  userIdentifier: [user.email, user.id],
})

Links

• Documentation
• Source

License

MIT