@obelism/improve-sdk-react

Obelism Improve React SDK

The React SDK sits around the Javascript Client SDK and gives React specific handlers.

Install

npm i @obelism/improve-sdk-react

Setup

In your config folder create the following file: improveClient.ts

import { generateImproveProvider } from '@obelism/improve-sdk-react'

export default generateImproveProvider(...)

API

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

<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.

useFlagValue

const value: string = useFlagValue(flagSlug: string)

Wrapper around getFlagValue that's passed down when the context is setup.

useTestValue

const value: string = useTestValue(testSlug: string)

Wrapper around getTestValue that's passed down when the context is setup.

usePostAnalytic

const postAnalytic = usePostAnalytic()

<button onClick={() => postAnalytic(testSlug: string, eventSlug: string, message: string)} />

Wrapper around postAnalytic that's passed down when the context is setup.

NextJS App router

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