WF React (Experiment Component)

A lightweight React toolkit for activating A/B tests and sending goals. Can be integrated with any A/B testing tool by using publish/subscribe events.

Works with any React app, even SPA's and sites containing multiple experiments

Installation

  npm install wf-react

  // or

  yarn add wf-react

Getting Started

Setting up an Experiment

  import { Component } from 'react';
  import { Experiment, Variation } from 'wf-react';


  export default class App extends Component {

    render() {
      return (
        <section className="container">

          {/* Define a Experiment with a name */}
          <Experiment name="favorite-color">

            {/* Optional: Define a control Variation */}
            <Variation control>
              <p>Rainbows</p>
            </Variation>

            {/* Define Variations with names */}
            <Variation name="green">
              <p>Green</p>
            </Variation>

          </Experiment>

        </section>
      )
    }

  }

Start an Experiment w. active Variation

Any experiment can be activated at anytime by simply calling wf.activate with the experiment and variation you want to show

  import { wf } from 'wf-react';

  wf.activate("favorite-color", "green");

Track a goal

Goals are tracked through a single subscription to keep everything simple. Subscribe all you goals to wf.goals and then trigger a goal by simply sending the goalName w. wf.track.

  import { wf, Experiment, Variation  } from 'wf-react';

  // Subscribe goals

  wf.goals(goalName => {

    switch(goalName) {
      case 'liked_green':
        alert('Liked Green');
        break;
      case 'hates_green':
        alert('Hates Green');
        break;
    }

  });

  export default class App extends Component {

    render() {
      return (
        <section className="container">

          {/* Publish goal */}
          <div onClick={ () => wf.track('liked_green') }>Do You Like green?</div>

          <div onClick={ () => wf.track('hates_green') }>You Don't Like green?</div>

        </section>
      )
    }

  }

Track Page Visits (SPA)

This works the same as goal tracking. Register pages using wf.pages and then indicate a page change with wf.pageChange.

  import { wf, Experiment, Variation  } from 'wf-react';

  // Subscribe pages

  wf.pages(page => {

    switch(page) {
      case '/about':
        alert('Visited about');
        break;
    }

  });

  export default class App extends Component {

    render() {
      return (
        <section className="container">

          {/* Publish page change */}
          <a onClick={ () => wf.pageChange('/about') }>About</a>

        </section>
      )
    }

  }