react-ab

[![Size][size-image]][size-url]

> Simple declarative and universal A/B testing component for React.

$3


Install

``bash
npm install react-ab --save
`

or

`bash
bower install react-ab --save
`

Examples

Using Mixpanel.

`js
var Experiment = require("react-ab").Experiment
, Variant = require("react-ab").Variant;

var App = React.createClass({
choice: function (experiment, variant, index) {
mixpanel.register({
"tagline": variant
});
}

, click: function (e) {
mixpanel.track("click");
}

, render: function () {
return (



);
}
});
`

Using Google Universal Analytics. Requires
a Custom Dimension.

`js
var Experiment = require("react-ab").Experiment
, Variant = require("react-ab").Variant;

var randomGoogle = function () {
// base randomness off analytics.js client id.
// https://developers.google.com/analytics/devguides/platform/user-id#clientid-userid
var clientId = tracker.get("clientId");
return (parseFloat(clientId, 10) % 100) / 100;
};

var App = React.createClass({
choice: function (experiment, variant) {
var dimension = 1; // Index of your custom dimension.
ga("set", "dimension" + dimension, experiment + ": " + variant);
}

, click: function (e) {
ga("send", "event", "click", "link");
}

, render: function () {
return (



);
}
});
`

Universality is achieved by setting get, set, clear. Here is an example
server side with Express.js and using ES6:

`js
import express from "express";
import cookieParser from "cookie-parser";

import React from "react/addons";
import { Experiment, Variant } from "react-ab";

var App = React.createClass({
choice: function (experiment, variant, index) {
console.log(experiment, variant, index);
}

, render: function () {
return (


);
}
});

var app = express();

app.use(cookieParser());

app.get("/", function (req, res) {
res.send(React.renderToString( get={(x) => req.cookies[x]}
set={(x, y) => res.cookie(x, y)}
clear={res.clearCookie}
/>));
});

app.listen(3000);
`

API

$3

#### Props

##### name

Name of experiment, this prop is required. Should be something that
describes the category being tested like color or title.

##### onChoice

Callback that fires when a variant is chosen. Gets arguments experiment
name, variant name, variant index and was retrieved?. was
retrieved? is true if the variant was retrieved using the get prop
usually from a cookie.

##### random

Random function, should return a number in the range [0, 1). The default uses
crypto.getRandomValues() when available and falls back on Math.random.

##### get

A function that takes an experiment and returns a variant. By
default uses browser cookies.

##### set

A function that takes an experiment and variant and stores it. By
default uses browser cookies.

##### clear

A function that clears/unsets an experiment. By
default uses browser cookies.

#### Context

get, set, clear, random can also be set from context. If these props
exists they overwrite context.

##### randomExperiment

random function taken from context.

##### getExperiment

get function taken from context.

##### setExperiment

set function taken from context.

##### clearExperiment

clear function taken from context`.

#### Methods

##### getVariant()

Returns the name of the current variant.

##### chooseVariant()

Choose a new variant.

##### clearCookie()

Clear the experiment cookie.

$3

#### Props

##### name

Name of variant, this props is required. Should be something descriptive of
the attribute the variant represent like red or large.

---

MIT Licensed

[size-image]: https://badge-size.herokuapp.com/olahol/react-ab/master/react-ab.js
[size-url]: https://github.com/olahol/react-ab/reab-ab.js