{"id":21282353,"url":"https://github.com/j16h/ab-react-hook","last_synced_at":"2026-03-05T16:48:47.535Z","repository":{"id":40790311,"uuid":"189403296","full_name":"j16h/ab-react-hook","owner":"j16h","description":"🧪A/B-Testing React Hook","archived":false,"fork":false,"pushed_at":"2025-06-03T20:43:13.000Z","size":1028,"stargazers_count":21,"open_issues_count":12,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-26T07:40:44.159Z","etag":null,"topics":["abtest","experiment","hooks","javascript","js","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/j16h.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-30T11:40:28.000Z","updated_at":"2024-05-22T03:21:41.000Z","dependencies_parsed_at":"2024-09-18T20:25:14.240Z","dependency_job_id":"f9ee80e4-fd02-47bd-ac43-45cb0d86c326","html_url":"https://github.com/j16h/ab-react-hook","commit_stats":null,"previous_names":["ju1i4n/ab-react-hook","j16h/ab-react-hook","imjul1an/ab-react-hook"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/j16h/ab-react-hook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j16h%2Fab-react-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j16h%2Fab-react-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j16h%2Fab-react-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j16h%2Fab-react-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j16h","download_url":"https://codeload.github.com/j16h/ab-react-hook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j16h%2Fab-react-hook/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264023455,"owners_count":23545677,"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":["abtest","experiment","hooks","javascript","js","react","typescript"],"created_at":"2024-11-21T10:54:29.267Z","updated_at":"2026-03-05T16:48:47.476Z","avatar_url":"https://github.com/j16h.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    A/B\n    \u003cbr/\u003e\n    Experiment Hooks\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n  \u003c/h1\u003e\n  \u003csup\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ab-react-hook\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/ab-react-hook.svg\" alt=\"npm package\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://circleci.com/gh/imjul1an/ab-react-hook\"\u003e\n      \u003cimg src=\"https://img.shields.io/circleci/build/github/imjul1an/ab-react-hook/master\" alt=\"CircleCI master\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://app.codecov.io/gh/imjul1an/ab-react-hook\"\u003e\n      \u003cimg src=\"https://img.shields.io/codecov/c/github/imjul1an/ab-react-hook\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://codesandbox.io/embed/ab-react-hook-playground-4crjn\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg\" /\u003e\n    \u003c/a\u003e\n    \u003cbr /\u003e\n  \u003c/sup\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Install\n\nUsing npm:\n\n```sh\nnpm i ab-react-hook\n```\n\nor using yarn:\n\n```sh\nyarn add ab-react-hook\n```\n\n\n## When should I use A/B tests?\n\nIt's a very good question to ask before start doing A/B tests. The simple answer would be - when the **sample size is statistically significant** and you have a **good traffic**. To dig deeper into numbers use [powercalculator](https://bookingcom.github.io/powercalculator/) made by [booking](https://bookingcom.github.io) to understand **how long would** it take you to run an A/B test and get a statistically significant result.\n\n\n## ```useExperiment()``` [![][img-demo]](https://codesandbox.io/embed/ab-react-hook-playground-4crjn)\n\n\n- Define experiment variants and weights:\n```\nvariants: [{\n  name: \"control\", weight: 50 \n}, {\n  name: \"test\", weight: 50\n}]\n```\nYou can define *as many variants as you want* but it is recommended to keep **two** or max **three** variants for your experiment.\n- Get the variant and send it to your analytics (_google analytics_, _facebook analytics_ etc.), so you can **aggregate results in a single place and analyze it later**.\n\n\n```js\nconst AddToCartButtonExperiment = () =\u003e {\n  const experimentConfig = {\n    id: \"3143106091\",\n    name: \"add-to-cart-green\",\n    variants: [{ name: \"control\", weight: 50 }, { name: \"test\", weight: 50 }]\n    enableForceExperiment: true\n  };\n \n  const variant = useExperiment(experimentConfig)\n\n  if (variant.name === \"control\") {\n     return \u003cbutton class=\"black\"\u003eAdd to cart\u003c/button\u003e;\n  } else if (variant.name === \"test\") {\n     return \u003cbutton class=\"green\"\u003eAdd to cart\u003c/button\u003e;\n  }\n}\n```\n\n\n## ```useExperimentAsync()```\n\n```js\nconst fetchVariant = () =\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e {\n      resolve(\"test\");\n    }, 2000);\n  });\n}\n\nfunction AsyncAddToCartButtonExperiment() {\n  const { variant, isLoading } = useExperimentAsync({\n    name: \"exp1\",\n    fetchVariant,\n    enableForceExperiment: true\n  });\n\n  if (isLoading) {\n    return \u003cdiv\u003eloading...\u003c/div\u003e;\n  }\n\n  if (variant.name === \"control\") {\n     return \u003cbutton class=\"black\"\u003eAdd to cart\u003c/button\u003e;\n  } else if (variant.name === \"test\") {\n     return \u003cbutton class=\"green\"\u003eAdd to cart\u003c/button\u003e;\n  }\n}\n\n```\n\n### Force experiment variant\n\nIf `enableForceExperiment` flag set to `true` you can seamlessly **test** all possible variants of the particular experiment without changing the code.\n\n\nTo **force** experiment variant add query parameter with **experiment id** and the **variant name**.\n\n- Force single experiment variant:\n```\n/?et=exp_id:exp_variant\n```\n\n- Force multiple experiments:\n```\n/?et=exp_1:exp_variant_id,exp_2:exp_variant_id\n```\n\n[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj16h%2Fab-react-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj16h%2Fab-react-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj16h%2Fab-react-hook/lists"}