Initial commit

Author: engvik

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+dist/

README.md

@@ -0,0 +1,84 @@
+# react-abtest
+
+Simple React AB test component
+
+## Install
+
+`npm install react-abtest`
+
+## Usage
+
+### ExperimentRandom
+
+Randomly renders a variant.
+
+```js
+import { ExperimentUniqueId } from 'react-abtest';
+
+const A = <div>A variant</div>;
+const B = <div>B variant</div>;
+const C = <div>C variant</div>;
+
+const ExampleTest = () => {
+  return <ExperimentRandom variants={[A, B, C]} />
+}
+
+export default ExampleTest;
+```
+
+### ExperimentUniqueId
+
+Renders the same variant based on a unique identifier and experiment name.
+
+```js
+import { ExperimentUniqueId } from 'react-abtest';
+
+const A = <div>A variant</div>;
+const B = <div>B variant</div>;
+const C = <div>C variant</div>;
+
+const ExampleTest = ({ uid }) => {
+  return <ExperimentUniqueId experimentName={'sample-experiment'} uid={uid} variants={[A, B, C]} />
+}
+
+export default ExampleTest;
+```
+
+### ExperimentValueGroup
+
+When you already have assigned the users to a group (number), for example in a cookie.
+
+```js
+import Cookie from 'cookies';
+import { ExperimentValueGroup } from 'react-abtest';
+
+const A = <div>A variant</div>;
+const B = <div>B variant</div>;
+const C = <div>C variant</div>;
+
+const ExampleTest = () => {
+  const userGroup = Cookies.get('abTestCookie');
+
+  const variants = [
+    {
+      group: 1, // Single group
+      component: A
+    },
+    {
+      group: '2-50', // Range group
+      component: B,
+    },
+    {
+      group: '51-100',
+      component: C
+    }
+  ];
+
+  // userGroup = 1, would render A
+  // userGroup = 33 would render B
+  // userGroup = 51 would render C
+  return <ExperimentValueGroup userGroup={userGroup} variants={variants} />;
+}
+
+export default ExampleTest;
+```

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-abtest",
+  "version": "1.0.0",
+  "description": "Simple React AB test component",
+  "main": "dist/index.js",
+  "scripts": {
+    "compile": "babel --presets es2015,stage-0,react -d dist/ src/",
+    "prepublish": "npm run compile"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/soldotno/react-abtest.git"
+  },
+  "bugs": {
+    "url": "https://github.com/soldotno/react-abtest/issues"
+  },
+  "homepage": "https://github.com/soldotno/react-abtest#readme",
+  "authors": [
+    "Lars Jansøn Engvik"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "6.24.1",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-0": "6.24.1"
+  },
+  "dependencies": {
+    "prop-types": "15.5.10",
+    "react": "15.5.4",
+    "react-dom": "15.5.4"
+  }
+}

src/ExperimentRandom.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { randomInteger } from './utils';
+
+const ExperimentRandom = ({ variants }) => {
+  if (variants.length === 0) {
+    return null;
+  }
+
+  const random = randomInteger(0, variants.length-1);
+  let VariantComponent = variants[random];
+
+  return <VariantComponent />;
+}
+
+export default ExperimentRandom;

src/ExperimentUniqueId.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { createHash } from './utils';
+
+const ExperimentUniqueId = ({ experimentName, uid, variants}) => {
+  if (variants.length === 0) {
+    return null;
+  }
+
+  const hash = createHash(uid + experimentName);
+  const variant = hash % variants.length;
+  const VariantComponent = variants[variant];
+
+  return <VariantComponent />;
+};
+
+ExperimentUniqueId.propTypes = {
+  experimentName: PropTypes.string.isRequired,
+  uid: PropTypes.string.isRequired,
+  variants: PropTypes.array.isRequired,
+};
+
+export default ExperimentUniqueId;

src/ExperimentValueGroup.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ExperimentValueGroup = ({ userGroup, variants }) => {
+  let VariantComponent = null;
+
+  variants.some((variant) => {
+    if (typeof variant.group === 'number') {
+      if (variant.group === userGroup) {
+        VariantComponent = variant.component;
+        return true;
+      }
+    }
+
+    if (typeof variant.group === 'string') {
+      const range = variant.group.split('-').map(num => parseInt(num, 10));
+
+      if (userGroup >= range[0] && userGroup <= range[1]) {
+        VariantComponent = variant.component;
+        return true;
+      }
+    }
+
+    return false;
+  });
+
+  return VariantComponent ? <VariantComponent /> : null;
+}
+
+ExperimentValueGroup.propTypes = {
+  userGroup: PropTypes.number.isRequired,
+  variants: PropTypes.array.isRequired,
+};
+
+export default ExperimentValueGroup;

src/index.js

@@ -0,0 +1,9 @@
+import ExperimentRandom from './ExperimentRandom';
+import ExperimentUniqueId from './ExperimentUniqueId';
+import ExperimentValueGroup from './ExperimentValueGroup';
+
+export {
+  ExperimentRandom,
+  ExperimentUniqueId,
+  ExperimentValueGroup,
+};

src/utils.js

@@ -0,0 +1,14 @@
+export function randomInteger(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function createHash(str) {
+  let i = 0;
+  let hash = 0;
+
+  for (i; i < str.length; i++) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(i);
+  }
+
+  return hash >>> 0;
+}