https://github.com/j16h/ab-react-hook
🧪A/B-Testing React Hook
https://github.com/j16h/ab-react-hook
abtest experiment hooks javascript js react typescript
Last synced: 3 months ago
JSON representation
🧪A/B-Testing React Hook
- Host: GitHub
- URL: https://github.com/j16h/ab-react-hook
- Owner: j16h
- License: mit
- Created: 2019-05-30T11:40:28.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-06-03T20:43:13.000Z (about 1 year ago)
- Last Synced: 2025-06-26T07:40:44.159Z (11 months ago)
- Topics: abtest, experiment, hooks, javascript, js, react, typescript
- Language: JavaScript
- Homepage:
- Size: 1000 KB
- Stars: 21
- Watchers: 2
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A/B
Experiment Hooks
## Install
Using npm:
```sh
npm i ab-react-hook
```
or using yarn:
```sh
yarn add ab-react-hook
```
## When should I use A/B tests?
It'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.
## ```useExperiment()``` [![][img-demo]](https://codesandbox.io/embed/ab-react-hook-playground-4crjn)
- Define experiment variants and weights:
```
variants: [{
name: "control", weight: 50
}, {
name: "test", weight: 50
}]
```
You can define *as many variants as you want* but it is recommended to keep **two** or max **three** variants for your experiment.
- 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**.
```js
const AddToCartButtonExperiment = () => {
const experimentConfig = {
id: "3143106091",
name: "add-to-cart-green",
variants: [{ name: "control", weight: 50 }, { name: "test", weight: 50 }]
enableForceExperiment: true
};
const variant = useExperiment(experimentConfig)
if (variant.name === "control") {
return Add to cart;
} else if (variant.name === "test") {
return Add to cart;
}
}
```
## ```useExperimentAsync()```
```js
const fetchVariant = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("test");
}, 2000);
});
}
function AsyncAddToCartButtonExperiment() {
const { variant, isLoading } = useExperimentAsync({
name: "exp1",
fetchVariant,
enableForceExperiment: true
});
if (isLoading) {
return
loading...;
}
if (variant.name === "control") {
return Add to cart;
} else if (variant.name === "test") {
return Add to cart;
}
}
```
### Force experiment variant
If `enableForceExperiment` flag set to `true` you can seamlessly **test** all possible variants of the particular experiment without changing the code.
To **force** experiment variant add query parameter with **experiment id** and the **variant name**.
- Force single experiment variant:
```
/?et=exp_id:exp_variant
```
- Force multiple experiments:
```
/?et=exp_1:exp_variant_id,exp_2:exp_variant_id
```
[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg