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> {}
}
Copy link
On this page
Installation
Usage
TypeScript