react-controlled-ab

React component for integrating test experiences with your react code from a source that decides what the variant should be.

Usage no npm install needed!

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

README

React Controlled AB

React component for integrating test experiences with your react code from a source like VWO and evergage that decides what the variant should be.

What it does

  • Listens for events dispatched by external sources (must be added manually, format below)
  • Can mount muliple experiences per campaign, experience will be decided by your provider and will be mounted after an event is fired in your experience.
  • Will fall back to control group with option for manual override. Will wait for experience to be triggered before reverting to control group if the campaign is not active.
  • Will not mount a component until an experience is recieved or the (customizeable) timeout expires after the window dom content loaded event to uphold anti-flicker-ness.
  • Server Side Rendering friendly (will not mount on server side due to nature of campaigns)

Installation


$ npm install --save react-controlled-ab

$ yarn add react-controlled-ab

Usage


import React, { Component } from 'react';
import ABTest, { DebugMenu } from "react-controlled-ab"
import { subscribeToCampaign } from "react-controlled-ab/datalayers/vwo/Datalayer"

<ABTest campaign={50} subscribeFunc={subscribeToCampaign}>
    <span>Test 50 - Instance 1 - Control</span>
    <span>Test 50 - Instance 1 - Variant B</span>
    <span>Test 50 - Instance 1 - Variant C</span>
</ABTest>

Props

campaign

Type: number Default: undefined

The number of the campaign you are testing, should correspond to the campaign ID in VWO.

subscribeFunc

Type: function Default: undefined

The function imported from the datalayer you'd like to use. This prop allows ABTest to know when the campaign variant is identified and or changed.

onExperience

Type: function Returns: Campaign with experienceId (number) and isControl (boolean)

Callback that will be executed when an experience or the control is chosen.

timeout

Type: number Default: 100

The amount of miliseconds to wait after dom content loaded to fallback to the control group if no event is received

placeholder

Type: boolean Default: false

Mount the control with visibility: hidden set on a container so the place it would usually take up is taken up in the DOM, can help to avoid jarring transitions