React
A React SPA using the React SDK provider and hooks
This example uses the React SDK to run an A/B test in a client side React app. The provider fetches the config on mount and exposes hooks to read test values down the component tree.
Like the static HTML example this runs fully on the client, so expect layout shift on content above the fold. For a server rendered setup without CLS see the Next.js example.
Install
npm i @obelism/improve-sdk-reactApp
generateImproveProvider returns the ImproveProvider plus the hooks. Wrap your app in the provider and read the variant with useTestValue. useImproveStatus lets you react to the loading state while the config is being fetched.
import React from 'react'
import { createRoot } from 'react-dom/client'
import { generateImproveProvider } from '@obelism/improve-sdk-react'
const { ImproveProvider, useTestValue, useImproveStatus } =
generateImproveProvider({
organizationId: 'org_MJFL46Z0WXGQ5OHW1ZXSM3Q88S',
environment: 'staging',
})
const Example = () => {
const status = useImproveStatus()
const testValue = useTestValue('startpage-visual')
return (
<>
<h1>Static React website</h1>
<p>
Your version: <span>{testValue}</span>
</p>
</>
)
}
const rootElement = document.querySelector('#root')
const root = createRoot(rootElement)
root.render(
<ImproveProvider>
<Example />
</ImproveProvider>,
)