AB+
A lightweight, flexible A/B testing component for React.
The goal of this project is to provide an approachable, functional split testing setup for React apps with minimal implementation overhead. AB+ exposes key callbacks for handling experiments and reporting on variants, which can be used for things like transmitting analytics events and performing further rendering operations.
AB+ uses localStorage to keep track of rendered variants so that a user will continue to see the same variant once it has been chosen.
Please note: this project is a work-in-progress. Feedback & contribution is greatly welcomed!
Installation
Via NPM
npm install --save ab-positive
Usage
Basic example usage
import React from 'react';
import { BannerA, BannerB } from '../components';
import { Experiment, Variant } from 'ab-positive';
...
<Experiment name="homepage_banner" />
<Variant name="plain" component={<BannerA />} />
<Variant name="bold" component={<BannerB />} />
</Experiment>
Experiment
An experiment manages a set of variants and dictates which variant is ultimately rendered.
You can use as many variants within an experiment as desired.
| prop (required) | type | description |
|--------|-----------|------|-------------|
| name | String | a name for the experiment being run |
Variant
A variant provides a wrapped instance of your component which allows for props to be injected.
| prop (required) | type | description |
|--------|-----------|------|-------------|
| name | String | a name for the variant |
| component* | React component | the component to load within the variant |
Testing
npm test
Troubleshooting
WIP
License
MIT [LICENSE.md]
