React SDK
FeatureBoard SDK for React applications
npm add --save @featureboard/react-sdk
# Or
yarn add @featureboard/react-sdk
# Or
pnpm add @featureboard/react-sdk
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>
}
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>,
)
}
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,
},
]),
})
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