# react-bucket-test
> Simplifying experiments with React.
Latest version **3.0.1** (published 2019-04-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-bucket-test
pnpm add react-bucket-test
yarn add react-bucket-test
bun add react-bucket-test
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.1 |
| Published | 2019-04-23 |
| First published | 2018-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Cezar Sampaio |
| Maintainers | cezarluiz0 |
| Keywords | react-component, ab test, bucket test, test, react, split test |
## Links
- npm: https://www.npmjs.com/package/react-bucket-test
- Repository: https://github.com/cezarsmpio/react-bucket-test
- Homepage: https://cezarsmpio.github.io/react-bucket-test/
- Issues: https://github.com/cezarsmpio/react-bucket-test/issues
- npm.io page: https://npm.io/package/react-bucket-test
## Dependencies (1)
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
## Alternatives
- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads
## Recent versions
- 3.0.1 (latest) — 2019-04-23
- 3.0.0 — 2019-04-20
- 2.2.0 — 2019-04-20
- 2.1.0 — 2018-12-11
- 2.0.0 — 2018-12-10
- 1.1.0 — 2018-03-15
- 1.0.0 — 2018-03-13
## README
# react-bucket-test
[](https://www.npmjs.com/package/react-bucket-test)
[](https://bundlephobia.com/result?p=react-bucket-test)
[](https://www.npmjs.com/package/react-bucket-test)
[](https://www.npmjs.com/package/react-bucket-test)
[](https://github.com/cezarlz/react-bucket-test)
[](https://github.com/cezarlz/react-bucket-test/issues)
[](https://GitHub.com/cezarlz/react-bucket-test/graphs/contributors/)
[](https://lbesson.mit-license.org/)
> Simplifying experiments with React.
## What's a "bucket test"?
> Bucket testing (sometimes referred to as A/B testing or split testing) is a term used to describe the method testing two versions of a website against one another to see which one performs better on specified key metrics (such as clicks, downloads or purchases).
[A/B testing on Wikipedia](https://en.m.wikipedia.org/wiki/A/B_testing)
## Installing
#### npm
```
npm install react-bucket-test
```
#### yarn
```
yarn add react-bucket-test
```
### Using
```js
import Hypothesis, { Variation } from 'react-bucket-test';
import GoogleTagManager from 'react-bucket-test/lib/drivers/GoogleTagManager';
const driver = GoogleTagManager({
prefix: 'my_cool_prefix_'
});
const Header = () => (
(
)}
/>
(
)}
/>
);
```
That's it!
## Components
### ``
```js
const driver = myCustomDriver();
const HeroBanner = () => (
...
);
```
This is the container for your tests, that's the component that will read and set your variations, dispatch the events to the driver, all logic is here. It accepts only `` as children.
#### `name`: string - required
It passes this value to the driver. It is an id like for your tests. It's better to have unique names for each hypothesis.
#### `driver`: object - required
This library provides some drivers, such as Google Tag Manager (more are coming). Drivers must follow an interface, you can check the section to create your own drivers.
### ``
```js
(
registerEvent({ action: 'play', category: 'cats' })}
/>
)}
/>
```
#### `name`: string - required
#### `traffic`: number
You can specify how to split the traffic of your tests. It must be a number. If you don't specify a traffic, it will split the traffic automatically through your variations equally. If you have 4 variations and the traffic is not specified, the traffic will be split into 25% for each variation.
**If you specify a traffic for one variation, you must specify for all of your variations.**
It uses weights, not percentage. This means you can use for example, 2, 1, 1 instead of 50, 25, 25.
#### `render`: ({ registerEvent: func, category: string, name: string, traffic: number | null }) => Component
To render your component. It passes down the following parameters:
- `registerEvent`: function - it accepts an object of any property as parameter, the driver will receive this object.
- `category`: string - the hypothesis name.
- `name`: string - the variation name.
- `traffic`: number - the variation traffic.
## Creating your own drivers
Drivers are used to register the events to a tracking tool, such as Google Tag Manager. You can pass any driver to the `` component. This library provides drivers for the following tracking tools:
- Google Tag Manager
To create your own driver, you just need to create an object with the following properties:
#### `prefix`: string
Default: `react_bucket_test_`
It's useful to create a namespace for your application.
#### `get`: (key: string) => string
Default: `localStorage.getItem`
Used by `` to render the correct variation.
#### `set`: (key: string, value: string) => void
Default: `localStorage.setItem`
Used by `` to set a variation in case if none exists.
#### `onMount`: ({ category: string, name: string, traffic: number | null }) => any
#### `onUnmount`: ({ category: string, name: string, traffic: number | null }) => any
`onMount` is called by `` when `componentDidMount`.
`onUnmount` is called by `` when `componentWillUnmount`.
- `category`: string - the hypothesis name.
- `name`: string - the variation name.
- `traffic`: number - the variation traffic.
#### `registerEvent`: (props: object) => any
That's the method that your `` receives when rendered.
`props` receives at least:
- `category`: string - the hypothesis name.
- `name`: string - the variation name.
- `traffic`: number - the variation traffic.
**You will override these properties if you pass properties with those names.**
[Check all drivers we support.](https://github.com/cezarlz/react-bucket-test/tree/master/src/drivers)
### Google Tag Manager
It uses `dataLayer` variable to publish events to GTM.
Default:
- `prefix`: 'react*bucket_test_gtm*'
- `onMount`: `{ action: 'load', ...props }`
- `onUnmount`: `{ action: 'unmount', ...props }`
- `registerEvent`: `{ action: 'registerEvent', ...props }`
You can override any property:
```js
// drivers are not included to the final bundle size
import GoogleTagManager from 'react-bucket-test/lib/drivers/GoogleTagManager';
const driver = GoogleTagManager({
prefix: 'experiment_'
});
```
---
Made with :heart:
---
_Source: https://npm.io/package/react-bucket-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._