Simple A/B testing component for React
A/B testing, also called split testing, is an experiment where two (or more) variants of a webpage are shown to users at random, and is used as a means of determining which variant leads to a better performance. Once a variant wins, it is then shown to all users.
Wrap components in <Variant />
and nest in <Experiment />
. A variant is chosen randomly and saved to local storage.
<Experiment name="My Example">
<Variant name="A">
<div>Version A</div>
</Variant>
<Variant name="B">
<div>Version B</div>
</Variant>
</Experiment>
npm install react-split-testing
yarn add react-split-testing
import { Experiment, Variant } from 'react-split-testing'
class App extends Component {
render() {
return (
<Experiment
ref="experiment"
name="My experiment"
onChoice={(experimentName, variantName) => console.log(experimentName, variantName)}
>
<Variant name="A">
<div>Section A</div>
</Variant>
<Variant name="B">
<div>Section B</div>
</Variant>
</Experiment>
)
}
}
A <Experiment />
with a userIdentifier
property will choose a consistent <Variant />
suitable for server side rendering.
import { Experiment, Variant } from 'react-split-testing'
class App extends Component {
render() {
return (
<Experiment name="My experiment" userIdentifier={this.props.userIdentifier}>
<Variant name="A">
<div>Section A</div>
</Variant>
<Variant name="B">
<div>Section B</div>
</Variant>
</Experiment>
)
}
}
<Experiment />
Experiment container component. Children must be of type Variant
.
Properties:
name
- Name of the experiment.
string
"My Example"
userIdentifier
- Distinct user identifier. Useful for server side rendering.
string
"lMMaTqA8ODe7c36hhf2N"
variantName
- Name of the variant. When defined, this value is used to choose a variant. This property may be useful for server side rendering.
string
"A"
onChoice
- Called when a Variant
has been chosen for your Experiment
.
function
(experimentName, variantName) => { console.log(experimentName, variantName) }
onRawChoice
- Same as onChoice
, but the objects passed are React component instances.
function
(experiment, variant) => { console.log(experimentName.getName(), variant.props.name) }
Methods:
getName()
- Returns the Experiment
name.getActiveVariant()
- Returns the currently displayed Variant
.getActiveVariantName()
- Returns the currently displayed Variant
name.getVariant(variantName)
- Returns the instance of the specified Variant
name.<Variant />
Variant container component.
Properties:
name
- Name of the variant.
string
"A"
weight
- The variants will be chosen according to the ratio of the numbers, for example variants A
, B
, C
with weights 1
, 2
, 2
will be chosen 20%, 40%, and 40% of the time, respectively.
number
1
2
Methods:
MIT