Install

npm install @arlioz/flagship-react @arlioz/flagship

@arlioz/flagship is a peer dependency.

Quick Start

1. Wrap your app with the provider

import { FlagShipProvider } from '@arlioz/flagship-react'

function App() {
  return (
    <FlagShipProvider apiKey="flg_production_..." baseUrl="https://your-api.com/api">
      <MyApp />
    </FlagShipProvider>
  )
}

2. Use flags in components

import { useFlag } from '@arlioz/flagship-react'

function MyComponent() {
  const darkMode = useFlag('dark-mode', false)
  return darkMode ? <DarkTheme /> : <LightTheme />
}

API

Provider

<FlagShipProvider
  apiKey="flg_production_..." // required
  baseUrl="https://..." // optional, default: http://localhost:4000/api
  userId="user-42" // optional
  attributes={{ plan: 'pro' }} // optional
  pollingInterval={30000} // optional, default: 30000ms
>
  {children}
</FlagShipProvider>

Hooks

| Hook | Return | Description | | -------------------------------- | --------------------- | --------------------------------------- | | useFlag<T>(key, defaultValue?) | T | Single flag value, re-renders on change | | useFlags() | Record<string, any> | All flags | | useFlagShipLoading() | boolean | True during initial fetch | | useFlagShipClient() | FlagShip | Client instance for imperative use |

Feature component

import { Feature } from '@arlioz/flagship-react'

<Feature flag="dark-mode">
  <DarkTheme />
</Feature>

<Feature flag="beta" fallback={<ComingSoon />}>
  <BetaFeature />
</Feature>

Identify users

const client = useFlagShipClient()
client.identify('user-42', { plan: 'pro' })

Compatibility

• React >= 17.0.0 (React 17, 18, 19)

License

MIT — Arlioz