react-experiment-hoc

1.3.2 • Public • Published

react-experiment-hoc

A/B-test components with a simple hoc

Latest Stable Version License

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: !? 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"));

/react-experiment-hoc/

    Package Sidebar

    Install

    npm i react-experiment-hoc

    Weekly Downloads

    16

    Version

    1.3.2

    License

    ISC

    Unpacked Size

    40 kB

    Total Files

    22

    Last publish

    Collaborators

    • sebost