React SDK

FeatureBoard SDK for React applications
Installation
1
npm add --save @featureboard/react-sdk
2
# Or
3
yarn add @featureboard/react-sdk
4
# Or
5
pnpm add @featureboard/react-sdk
Copied!
Usage
1
import { useFeature } from '@featureboard/react-sdk'
2
​
3
function MyComponent() {
4
    const someFeatureEnabled = useFeature('some-feature')
5
​
6
    if (someFeatureEnabled) {
7
        return <div>Some feature enabled</div>
8
    }
9
​
10
    return <div>Some feature not enabled</div>
11
}
Copied!
Setup
1
import { FeatureBoardProvider, useClient } from '@featureboard/react-sdk'
2
​
3
​
4
function App() {
5
    // FeatureBoard's useClient hook will automatically re-initialise the client
6
    // NOTE: The old client will be returned until the new client initialises
7
    const { client, initError } = useClient({
8
        apiKey: '<environment api key>',
9
        audiences: ['audiences', 'for', 'current', 'user'],
10
​
11
        // See [JS SDK Options](/docs/sdks/javascript/) for other available options
12
    })
13
​
14
    // While the client is initialising, it will return undefined
15
    // Usage of the `useFeature` hook while the client is not initialised will throw an error
16
    if (!client) {
17
        return <div>Loading...</div>
18
    }
19
​
20
    if (initError) {
21
        return <div>Failed to load...</div>
22
    }
23
​
24
    return (
25
        <FeatureBoardProvider client={client}>
26
            <RestOfApp />
27
        </FeatureBoardProvider>,
28
    )
29
}
Copied!
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.
1
import { FeatureBoardService, MemoryEffectiveFeatureStore } from '@featureboard/js-sdk'
2
​
3
const { client, initError } = useClient({
4
    apiKey: '<environment api key>',
5
    audiences: ['audiences', 'for', 'current', 'user'],
6
​
7
    // See [JS SDK Options](/docs/sdks/javascript/) for other available options
8
    store: new MemoryEffectiveFeatureStore([
9
        {
10
            featureKey: 'my-feature-key',
11
            value: false,
12
        },
13
    ]),
14
})
Copied!
TypeScript
To get type safety on your features you can use Declaration Merging to define the features
1
declare module '@featureboard/js-sdk' {
2
    interface Features {
3
        'test-feature-1': boolean
4
        'test-feature-2': string
5
        'test-feature-2b': string
6
        'test-feature-3': number
7
    }
8
}
Copied!
If you do not want to specify all your features the features you can just add:
1
declare module '@featureboard/js-sdk' {
2
    interface Features extends Record<string, string | number | boolean> {}
3
}
Copied!

SDKs - Previous

NodeJS SDK

Next - Management APIs (Beta)

Authentication

Last modified 6mo ago

Copy link

Contents

Installation

Usage

TypeScript