@simpozio/split-test

Split Test Component

React component for A/B-testing of components.

Installation

npm i @simpozio/split-test

Usage

Basic

import SplitTest from '@simpozio/split-test';

const Component = () => {
  return (
    <SplitTest>
      <SplitTest.Variant name="A">
        Variant A
      </SplitTest.Variant>
      <SplitTest.Variant name="B">
        Variant B
      </SplitTest.Variant>
    </SplitTest>
  )
}

Use preset State Reducer

import SplitTest, {locationStateReducer} from '@simpozio/split-test';

const Component = () => {
  return (
    <SplitTest stateReducer={locationStateReducer}>
      <SplitTest.Variant name="A">
        Variant A
      </SplitTest.Variant>
      <SplitTest.Variant name="B">
        Variant B
      </SplitTest.Variant>
    </SplitTest>
  )
}

Use custom State Reducer

import SplitTest, {locationStateReducer} from '@simpozio/split-test';

const Component = () => {
  const [variant, setVariant] = useState('A');

  const customStateReducer = () => variant;
 
  const handleChange = () => setVariant(variant === 'A' ? 'B' : 'A');

  return (
    <>
      <button onClick={handleChange}>Change variant</button>
      <SplitTest stateReducer={customStateReducer}>
        <SplitTest.Variant name="A">
          Variant A
        </SplitTest.Variant>
        <SplitTest.Variant name="B">
          Variant B
        </SplitTest.Variant>
      </SplitTest>
    </>
  )
}

Props

SplitTest component accepts only one optional property:

• stateReducer: (variants: string[]) => string - state reducer is a function that controls logic of changing between variants, it accepts all variants as prop and returns single variant that should be rendered;

SplitTest component will ignore all children except SplitTest.Variant

SplitTest.Variant component accepts prop:

• name: string - it neccessary for identifying variants inside the SplitTest component and stateReducers

Presets

• randomStateReducer - default state reducer, it will render random variant on page update;
• locationStateReducer - render variant based on location query parameter 'variant', e.g. '?variant=B' for rendering variant B;

Development

Look simpozio-frontend-common library