{"id":13437619,"url":"https://github.com/olahol/react-ab","last_synced_at":"2025-04-05T07:02:36.210Z","repository":{"id":66328594,"uuid":"20269346","full_name":"olahol/react-ab","owner":"olahol","description":"Simple declarative and universal A/B testing component for React.","archived":false,"fork":false,"pushed_at":"2017-09-27T17:05:19.000Z","size":160,"stargazers_count":431,"open_issues_count":6,"forks_count":24,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T06:04:55.890Z","etag":null,"topics":["ab-testing","javascript","react","universal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olahol.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-05-28T19:17:33.000Z","updated_at":"2024-11-06T10:34:03.000Z","dependencies_parsed_at":"2023-07-07T14:47:12.023Z","dependency_job_id":null,"html_url":"https://github.com/olahol/react-ab","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-ab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-ab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-ab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-ab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olahol","download_url":"https://codeload.github.com/olahol/react-ab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299829,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ab-testing","javascript","react","universal"],"created_at":"2024-07-31T03:00:58.757Z","updated_at":"2025-04-05T07:02:36.189Z","avatar_url":"https://github.com/olahol.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Utilities","UI Utilites","JavaScript"],"sub_categories":["Uncategorized","Test User Behavior"],"readme":"# react-ab\n\n[![npm version](https://badge.fury.io/js/react-ab.svg)](http://badge.fury.io/js/react-ab)\n[![Build Status](https://travis-ci.org/olahol/react-ab.svg)](https://travis-ci.org/olahol/react-ab)\n[![Coverage Status](https://img.shields.io/coveralls/olahol/react-ab.svg?style=flat)](https://coveralls.io/r/olahol/react-ab)\n[![Dependency Status](https://david-dm.org/olahol/react-ab/peer-status.svg)](https://david-dm.org/olahol/react-ab)\n[![Size][size-image]][size-url]\n\n\u003e Simple declarative and universal A/B testing component for React.\n\n### [Demo](https://olahol.github.io/react-ab/example)\n\n[![A/B Testing Demo](https://cdn.rawgit.com/olahol/react-ab/master/example/demo.gif \"A/B Testing Demo\")](http://olahol.github.io/react-ab/example)\n\n## Install\n\n```bash\nnpm install react-ab --save\n```\n\nor\n\n```bash\nbower install react-ab --save\n```\n\n## Examples\n\nUsing [Mixpanel](https://mixpanel.com/).\n\n```js\nvar Experiment = require(\"react-ab\").Experiment\n  , Variant = require(\"react-ab\").Variant;\n\nvar App = React.createClass({\n  choice: function (experiment, variant, index) {\n    mixpanel.register({\n      \"tagline\": variant\n    });\n  }\n\n  , click: function (e) {\n    mixpanel.track(\"click\");\n  }\n\n  , render: function () {\n    return (\n      \u003cdiv\u003e\n        \u003cExperiment onChoice={this.choice} name=\"tagline\"\u003e\n          \u003cVariant name=\"normal\"\u003e\n            \u003ch1\u003e A A/B testing component for React \u003c/h1\u003e\n          \u003c/Variant\u003e\n          \u003cVariant name=\"enterprise\"\u003e\n            \u003ch1\u003e A vertically integrated React component \u003c/h1\u003e\n          \u003c/Variant\u003e\n          \u003cVariant name=\"lies\"\u003e\n            \u003ch1\u003e One weird React component that will increase your metrics by 100%! \u003c/h1\u003e\n          \u003c/Variant\u003e\n        \u003c/Experiment\u003e\n        \u003ca onClick={this.click} href=\"//github.com/olahol/react-ab\"\u003eReact AB component\u003c/a\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n```\n\nUsing [Google Universal Analytics](http://www.google.com/analytics/). Requires\na [Custom Dimension](https://support.google.com/analytics/answer/2709829?hl=en).\n\n```js\nvar Experiment = require(\"react-ab\").Experiment\n  , Variant = require(\"react-ab\").Variant;\n\nvar randomGoogle = function () {\n  // base randomness off analytics.js client id.\n  // https://developers.google.com/analytics/devguides/platform/user-id#clientid-userid\n  var clientId = tracker.get(\"clientId\");\n  return (parseFloat(clientId, 10) % 100) / 100;\n};\n\nvar App = React.createClass({\n  choice: function (experiment, variant) {\n    var dimension = 1; // Index of your custom dimension.\n    ga(\"set\", \"dimension\" + dimension, experiment + \": \" + variant);\n  }\n\n  , click: function (e) {\n    ga(\"send\", \"event\", \"click\", \"link\");\n  }\n\n  , render: function () {\n    return (\n      \u003cdiv\u003e\n        \u003cExperiment onChoice={this.choice} random={randomGoogle} name=\"tagline\"\u003e\n          \u003cVariant name=\"normal\"\u003e\n            \u003ch1\u003e A A/B testing component for React \u003c/h1\u003e\n          \u003c/Variant\u003e\n          \u003cVariant name=\"enterprise\"\u003e\n            \u003ch1\u003e A vertically integrated React component \u003c/h1\u003e\n          \u003c/Variant\u003e\n          \u003cVariant name=\"lies\"\u003e\n            \u003ch1\u003e One weird React component that will increase your metrics by 100%! \u003c/h1\u003e\n          \u003c/Variant\u003e\n        \u003c/Experiment\u003e\n        \u003ca onClick={this.click} href=\"//github.com/olahol/react-ab\"\u003eReact AB component\u003c/a\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n```\n\nUniversality is achieved by setting `get, set, clear`. Here is an example\nserver side with Express.js and using ES6:\n\n```js\nimport express from \"express\";\nimport cookieParser from \"cookie-parser\";\n\nimport React from \"react/addons\";\nimport { Experiment, Variant } from \"react-ab\";\n\nvar App = React.createClass({\n  choice: function (experiment, variant, index) {\n    console.log(experiment, variant, index);\n  }\n\n  , render: function () {\n    return (\n      \u003cdiv\u003e\n        \u003cExperiment {...this.props} onChoice={this.choice} name=\"tagline\"\u003e\n          \u003cVariant name=\"normal\"\u003e\n            \u003ch1\u003e A A/B testing component for React \u003c/h1\u003e\n          \u003c/Variant\u003e\n          \u003cVariant name=\"enterprise\"\u003e\n            \u003ch1\u003e A vertically integrated React component \u003c/h1\u003e\n          \u003c/Variant\u003e\n          \u003cVariant name=\"lies\"\u003e\n            \u003ch1\u003e One weird React component that will increase your metrics by 100%! \u003c/h1\u003e\n          \u003c/Variant\u003e\n        \u003c/Experiment\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nvar app = express();\n\napp.use(cookieParser());\n\napp.get(\"/\", function (req, res) {\n  res.send(React.renderToString(\u003cApp\n    get={(x) =\u003e req.cookies[x]}\n    set={(x, y) =\u003e res.cookie(x, y)}\n    clear={res.clearCookie}\n  /\u003e));\n});\n\napp.listen(3000);\n```\n\n## API\n\n### Experiment\n\n#### Props\n\n##### name\n\nName of experiment, this prop is required. Should be something that\ndescribes the category being tested like color or title.\n\n##### onChoice\n\nCallback that fires when a variant is chosen.  Gets arguments `experiment\nname`, `variant name`, `variant index` and `was retrieved?`. `was\nretrieved?` is true if the variant was retrieved using the `get` prop\nusually from a cookie.\n\n##### random\n\nRandom function, should return a number in the range [0, 1). The default uses\n`crypto.getRandomValues()` when available and falls back on `Math.random`.\n\n##### get\n\nA function that takes an `experiment` and returns a `variant`. By\ndefault uses browser cookies.\n\n##### set\n\nA function that takes an `experiment` and `variant` and stores it. By\ndefault uses browser cookies.\n\n##### clear\n\nA function that clears/unsets an `experiment`. By\ndefault uses browser cookies.\n\n#### Context\n\n`get, set, clear, random` can also be set from `context`. If these props\nexists they overwrite `context`.\n\n##### randomExperiment\n\n`random` function taken from `context`.\n\n##### getExperiment\n\n`get` function taken from `context`.\n\n##### setExperiment\n\n`set` function taken from `context`.\n\n##### clearExperiment\n\n`clear` function taken from `context`.\n\n#### Methods\n\n##### getVariant()\n\nReturns the name of the current variant.\n\n##### chooseVariant()\n\nChoose a new variant.\n\n##### clearCookie()\n\nClear the experiment cookie.\n\n### Variant\n\n#### Props\n\n##### name\n\nName of variant, this props is required. Should be something descriptive of\nthe attribute the variant represent like red or large.\n\n---\n\nMIT Licensed\n\n[size-image]: https://badge-size.herokuapp.com/olahol/react-ab/master/react-ab.js\n[size-url]: https://github.com/olahol/react-ab/reab-ab.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folahol%2Freact-ab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folahol%2Freact-ab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folahol%2Freact-ab/lists"}