ab-positive

A lightweight, approachable A/B testing component for React.

Usage no npm install needed!

<script type="module">
  import abPositive from 'https://cdn.skypack.dev/ab-positive';
</script>

README

status npm donwloads issues license

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]

Contributors

  • Adam Sidiali [Gh] [Tw]