# React (/docs/examples/react)



This example uses the [React SDK](/docs/sdk/react) 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](/docs/examples/html) 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](/docs/examples/nextjs).

## Install [#install]

```bash
npm i @obelism/improve-sdk-react
```

## App [#app]

[`generateImproveProvider`](/docs/sdk/react#generateimproveprovider) returns the `ImproveProvider` plus the hooks. Wrap your app in the provider and read the variant with [`useTestValue`](/docs/sdk/react#usetestvalue). `useImproveStatus` lets you react to the loading state while the config is being fetched.

```tsx title="src/index.tsx"
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>,
)
```

## Source [#source]

<Cards>
  <Card title="View on GitHub" href="https://github.com/Obelism/improve-sdk/tree/main/examples/react" description="Full source for this example" />

  <Card title="View live demo" href="https://react.improve.obelism.studio" description="This example deployed and running" />
</Cards>