npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-ab

v0.5.0

Published

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

Downloads

1,021

Readme

react-ab

npm version Build Status Coverage Status Dependency Status Size

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

Demo

A/B Testing Demo

Install

npm install react-ab --save

or

bower install react-ab --save

Examples

Using Mixpanel.

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 (
      <div>
        <Experiment onChoice={this.choice} name="tagline">
          <Variant name="normal">
            <h1> A A/B testing component for React </h1>
          </Variant>
          <Variant name="enterprise">
            <h1> A vertically integrated React component </h1>
          </Variant>
          <Variant name="lies">
            <h1> One weird React component that will increase your metrics by 100%! </h1>
          </Variant>
        </Experiment>
        <a onClick={this.click} href="//github.com/olahol/react-ab">React AB component</a>
      </div>
    );
  }
});

Using Google Universal Analytics. Requires a Custom Dimension.

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 (
      <div>
        <Experiment onChoice={this.choice} random={randomGoogle} name="tagline">
          <Variant name="normal">
            <h1> A A/B testing component for React </h1>
          </Variant>
          <Variant name="enterprise">
            <h1> A vertically integrated React component </h1>
          </Variant>
          <Variant name="lies">
            <h1> One weird React component that will increase your metrics by 100%! </h1>
          </Variant>
        </Experiment>
        <a onClick={this.click} href="//github.com/olahol/react-ab">React AB component</a>
      </div>
    );
  }
});

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

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 (
      <div>
        <Experiment {...this.props} onChoice={this.choice} name="tagline">
          <Variant name="normal">
            <h1> A A/B testing component for React </h1>
          </Variant>
          <Variant name="enterprise">
            <h1> A vertically integrated React component </h1>
          </Variant>
          <Variant name="lies">
            <h1> One weird React component that will increase your metrics by 100%! </h1>
          </Variant>
        </Experiment>
      </div>
    );
  }
});

var app = express();

app.use(cookieParser());

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

app.listen(3000);

API

Experiment

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.

Variant

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