React-experiment-hoc NPM

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"));