Skip to main content

React Quickstart

Add Xaiku variant testing and tracking to your React app.

Prerequisites​

  • React 18 or 19
  • A Xaiku account with a public key (pk_*)
  • A experiment created in the Xaiku dashboard

1. Install​

npm install @xaiku/react

2. Add the Provider​

Wrap your app with XaikuProvider:

import { XaikuProvider } from '@xaiku/react'

function App() {
  return (
    <XaikuProvider pkey="pk_your_public_key">
      {/* your app */}
    </XaikuProvider>
  )
}

3. Display variant text​

Use Experiment and Text to render A/B test content:

import { Experiment, Text } from '@xaiku/react'

function Hero() {
  return (
    <Experiment id="your_experiment_id">
      <Text id="headline" fallback="Welcome to our product">
        {(text) => <h1>{text}</h1>}
      </Text>
      <Text id="cta" fallback="Get Started">
        {(text) => <button>{text}</button>}
      </Text>
    </Experiment>
  )
}

Text automatically tracks a view impression when it renders. The fallback value is shown if variants haven't loaded yet.

4. Track events​

import { useTrackClick, useTrackConversion } from '@xaiku/react'

function SignupButton({ experimentId, variantId }) {
  const trackClick = useTrackClick({ experimentId, variantId, partId: 'cta' })
  const trackConversion = useTrackConversion({ experimentId, variantId, partId: 'cta' })

  const handleClick = () => {
    trackClick()
    // After successful signup:
    trackConversion()
  }

  return <button onClick={handleClick}>Sign Up</button>
}

The tracking hooks require experimentId and accept optional variantId and partId for attribution. They return a function you call when the event occurs.

Next steps​