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!