Skip to content
FeatureBoard Docs

React SDK

The @featureboard/react-sdk is a FeatureBoard SDK for React applications. The @featureboard/react-sdk package uses @featureboard/js-sdk package as a peer dependency.

Prerequisites

Before using @featureboard/react-sdk you will need to have a valid environmentApiKey. To find the Environment API Key, navigate to the “Product Settings” section and copy the key associated with your specific environment.

Installation

The FeatureBoard React SDK is available on NPM.

Terminal window
npm add --save @featureboard/react-sdk
# Or
yarn add @featureboard/react-sdk
# Or
pnpm add @featureboard/react-sdk

Setup

To integrate FeatureBoard into your React project you need to create an instance of BrowserClient. Subsequently, you retrieve the FeatureBoardClient from the browser client and pass it to the FeatureBoardProvider as a prop. To ensure the client is initialised and capture potential initialisation errors, the useClient hook is used.

import React from 'react'
import { createBrowserClient } from '@featureboard/js-sdk'
import { FeatureBoardProvider, useClient } from '@featureboard/react-sdk'


const browserClient = createBrowserClient({
    environmentApiKey: 'environment-api-key',
    audiences: [],
})


export function App() {
    const { client, isInitialising, isError, error } = useClient({
        browserClient
        audiences: ['my-audience-key'],
    })


    if (isInitialising) {
        return <div>Loading...</div>
    }


    if (isError) {
        return <div>Error...</div>
    }


    return (
        <FeatureBoardProvider client={client}>
            <p> Ready to use feature toggling! </p>
        </FeatureBoardProvider>,
    )
}

Note:
To learn more about how to setup the BrowserClient and configuration options see JavaScript SDK.

Hooks

useClient

The useClient hook returns the FeatureBoardClient and handles initialisation.

Input Parameters

  • browserClient, the BrowserClient instance.
  • audiences specifies what audience keys the client will use. When audiences is changed the client will re-initialise and the internal state store is reset.

Return Properties

  • client - FeatureBoardClient to be passed into FeatureBoardProvider.
  • isInitialising - This property will be true while the client is initialising otherwise false.
  • isError - If an error occurs during initialisation this property will return true.
  • error - If an error occurs during initialisation this property will contain information about the error.

useFeature

The useFeature hook returns the effective feature value for a feature. It subscribes to the feature and will update if the feature value is changed.

Input Parameters

  • featureKey specifies the key for the feature.
  • defaultValue specifies the default value for the feature. This value will be returned if featureKey can not be found.

Usage

import { useFeature } from '@featureboard/react-sdk'


function MyComponent() {
    const isBetaEnabled = useFeature('beta-feature-enabled', false)


    if (isBetaEnabled) {
        return <div>Beta feature enabled</div>
    }


    return <div>Beta feature disabled</div>
}

Note: An error will be thrown if client in FeatureBoardProvider has not been set.

TypeScript

To get type safety on your features you can use Declaration Merging to define the features

This can be done manually e.g.

import '@featureboard/js-sdk'


declare module '@featureboard/js-sdk' {
    interface Features {
        'my-boolean-feature-key': boolean
        'my-option-feature-key': string
        'my-number-feature-key': number
        'my-string-feature-key': string
    }
}

Or automatically via the cli tool

By running npx @featureboard/cli login, then npx @featureboard/cli code-gen --template typescript --output ./ to generate a features.ts file in the output path or update an existing one.

OR if you do not want to specify all your features the features you can just add:

declare module '@featureboard/js-sdk' {
    interface Features extends Record<string, string | number | boolean> {}
}