React SDK

FeatureBoard SDK for React applications
Installation
npm add --save @featureboard/react-sdk
# Or
yarn add @featureboard/react-sdk
# Or
pnpm add @featureboard/react-sdk
Usage
import { useFeature } from '@featureboard/react-sdk'
​
function MyComponent() {
    const someFeatureEnabled = useFeature('some-feature')
​
    if (someFeatureEnabled) {
        return <div>Some feature enabled</div>
    }
​
    return <div>Some feature not enabled</div>
}
Setup
import { FeatureBoardProvider, useClient } from '@featureboard/react-sdk'
​
​
function App() {
    // FeatureBoard's useClient hook will automatically re-initialise the client
    // NOTE: The old client will be returned until the new client initialises
    const { client, initError } = useClient({
        apiKey: '<environment api key>',
        audiences: ['audiences', 'for', 'current', 'user'],
​
        // See [JS SDK Options](/docs/sdks/javascript/) for other available options
    })
​
    // While the client is initialising, it will return undefined
    // Usage of the `useFeature` hook while the client is not initialised will throw an error
    if (!client) {
        return <div>Loading...</div>
    }
​
    if (initError) {
        return <div>Failed to load...</div>
    }
​
    return (
        <FeatureBoardProvider client={client}>
            <RestOfApp />
        </FeatureBoardProvider>,
    )
}
Specifying initial values
If you would like to manually specify the last known good set of features values, the SDK will start using those values if it can't connect to the service.
import { FeatureBoardService, MemoryEffectiveFeatureStore } from '@featureboard/js-sdk'
​
const { client, initError } = useClient({
    apiKey: '<environment api key>',
    audiences: ['audiences', 'for', 'current', 'user'],
​
    // See [JS SDK Options](/docs/sdks/javascript/) for other available options
    store: new MemoryEffectiveFeatureStore([
        {
            featureKey: 'my-feature-key',
            value: false,
        },
    ]),
})
TypeScript
To get type safety on your features you can use Declaration Merging to define the features
declare module '@featureboard/js-sdk' {
    interface Features {
        'test-feature-1': boolean
        'test-feature-2': string
        'test-feature-2b': string
        'test-feature-3': number
    }
}
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> {}
}
Last modified 1yr ago