Skip to content
Simple A/B testing for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.eslintignore
.eslintrc.js
.gitignore
.npmrc
.prettierignore
CHANGELOG.md
LICENSE.md
README.md
package.json
rollup.config.js

README.md

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

You can’t perform that action at this time.