The React SDK sits around the Javascript Client SDK and gives React specific handlers.
npm i @obelism/improve-sdk-react
In your config folder create the following file: improveClient.ts
import { generateImproveProvider } from '@obelism/improve-sdk-react'
export default generateImproveProvider(...)
generateImproveProvider(improveArgs: {
organizationId: string
environment: 'develop' | 'staging' | 'production'
config?: Configuration
fetchTimeout?: number
}) => ({
ImproveProvider,
usePostAnalytic,
useTestValue,
useFlagValue
})
Setup function that generates the React component and hooks.
<ImproveProvider>
{children}
</ImproveProvider>
On mount this automatically fetches the ImproveSDK and the config if not provided initially. Exposes a context that is used to populate data to the hooks down the component tree.
const value: string = useFlagValue(flagSlug: string)
Wrapper around getFlagValue that's passed down when the context is setup.
const value: string = useTestValue(testSlug: string)
Wrapper around getTestValue that's passed down when the context is setup.
const postAnalytic = usePostAnalytic()
<button onClick={() => postAnalytic(testSlug: string, eventSlug: string, message: string)} />
Wrapper around postAnalytic that's passed down when the context is setup.
For NextJS we need to make sure the generated provider is marked as a client component. For this we need to declare the ImproveProvider
within the file we declare "use client"
.
This is needed because the ImproveProvider uses an useEffect
to fetch load the JS SDK async and fetch the config async if needed. After it's setup it uses context to pass the data down.
'use client'
import { generateImproveProvider } from 'utils/generateImproveProvider'
const improveReact = generateImproveProvider(...)
export const ImproveProvider = improveReact.ImproveProvider
export const useTestValue = improveReact.useTestValue
export const useFlagValue = improveReact.useFlagValue
export const usePostAnalytic = improveReact.usePostAnalytic