react-simple-experiment

3.1.0 • Public • Published

React Simple Experiment

version MIT License Standard Version Size Size gzip

Simple A/B testing for React

  • Exports ExperimentConsumer Render Prop and withExperiments HOC for accessing and modifying experiments
  • Persists assigned variant for return visits (using localForage)
  • configurable variants weights
  • Requires React 16.3+ due to utilising new context

Exports

  • ExperimentProvider
  • ExperimentConsumer
  • withExperiments
  • Experiment
  • Variant
  • ActiveVariant

Usage

ExperimentProvider, Experiment & Variant

import React, { Component } from "react";
import { render } from "react-dom";
import {
  ExperimentProvider,
  Experiment,
  Variant
} from "react-simple-experiment";

class MyExperiment extends Component {
  logExperimentInfo = ({ name, variants, activeVariantId }) => {
    console.log({ name, variants, activeVariantId });
  };

  render() {
    return (
      <Experiment name="Experiment Name" onLoad={this.logExperimentInfo}>
        <Variant name="control" weight={60}>
          <div>Control</div>
        </Variant>
        <Variant name="variant1" weight={20}>
          <div>Variant 1</div>
        </Variant>
      </Experiment>
    );
  }
}

class App extends Component {
  render() {
    return (
      <ExperimentProvider>
        <MyExperiment />
      </ExperimentProvider>
    );
  }
}

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

ExperimentProvider, ActiveVariant & withExperiments

import React, { Component } from "react";
import { render } from "react-dom";
import {
  ExperimentProvider,
  ActiveVariant,
  withExperiments
} from "react-simple-experiment";

class MyExperimentBase extends Component {
  componentDidMount() {
    this.props.createExperiment({
      onLoad: this.logExperimentInfo,
      name: "Experiment Name",
      variants: {
        control: 1, // integer represents variant weight
        variant: 1
      }
    });
  }

  logExperimentInfo = ({ name, variants, activeVariantId }) => {
    console.log({ name, variants, activeVariantId });
  };

  render() {
    return (
      <div>
        <ActiveVariant experiment="Experiment Name" variant="control">
          <div>Control</div>
        </ActiveVariant>
        <ActiveVariant experiment="Experiment Name" variant="variant">
          <div>Variant 1</div>
        </ActiveVariant>
      </div>
    );
  }
}

const MyExperiment = withExperiments(MyExperimentBase);

class App extends Component {
  render() {
    return (
      <ExperimentProvider>
        <MyExperiment />
      </ExperimentProvider>
    );
  }
}

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

ExperimentProvider, ExperimentConsumer

import React, { Component } from "react";
import { render } from "react-dom";
import {
  ExperimentProvider,
  ExperimentConsumer
} from "react-simple-experiment";

class MyExperimentManagerBase extends Component {
  setControl = () => {
    this.props.setExperimentVariant("Experiment Name", "control");
  };

  setVariant = () => {
    this.props.setExperimentVariant("Experiment Name", "variant");
  };

  render() {
    return (
      <div>
        <button onClick={this.setControl}>set control</button>
        <button onClick={this.setVariant}>set variant</button>
      </div>
    );
  }
}

const MyExperimentManager = props => (
  <ExperimentConsumer>
    {context => (
      <MyExperimentManagerBase
        {...props}
        experiments={context.experiments}
        createExperiment={context.createExperiment}
        removeExperiment={context.removeExperiment}
        setExperimentVariant={context.setExperimentVariant}
      />
    )}
  </ExperimentConsumer>
);

class App extends Component {
  render() {
    return (
      <ExperimentProvider>
        <MyExperimentManager />
      </ExperimentProvider>
    );
  }
}

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

License

MIT

Package Sidebar

Install

npm i react-simple-experiment

Weekly Downloads

104

Version

3.1.0

License

MIT

Unpacked Size

36.6 kB

Total Files

7

Last publish

Collaborators

  • danhayden