react-experiment-hoc

A/B-test components with a simple hoc

Usage

withExperiment(experiment-name, [options])(Component)

Options

| Name | Description | Type | Default | |------|-------------|------|---------| | persistent | Wheter the experiment should be persistant for sesions. -1 evaluate on every render, 0 evaluate on every session, 1 evaluate once. | int | 1 | | autoPlay | Auto play experiment on render | bool | false | | fallbackName | Name of the fallback variation if fetch fails | string | 'original' | | propPrefix | Prefix for the prop names passed to BaseComponent | string | null | | onFetch | Fetch method returns variations of the given experiment | function | Promise.resolve([]) | | onPlay | Trigger play | function | Promise.resolve() | | onWin | Trigger win | function | Promise.resolve() | | setCookie | Set cookie method | function | js-cookie.set | | getCookie | Get cookie method | function | js-cookie.get |

Example

import { ExperimentContext, withExperiment } from 'react-experiment-hoc';

// App
const App = () => (
    <ExperimentProvider options={experimentOptions}>
        <p>This app is running experiments!</p>
        <ExperimentBtn />
    </ExperimentProvider>
);

// Original component
const Btn = ({experimentWin,experimentVariant: v}) => (
    <button style={{
            opacity: !v ? 0 : 1,
            background: v === 'green-cta' ? 'green' : '',
        }}
        onClick={experimentWin}>
        PRESS ME!
    </button>
)

// Apply the experiments
const ExperimentBtn = withExperiment('new-cta-colors', {
    autoPlay: true
})(Btn)

render(<App />, document.getElementById("root"));