https://github.com/danhayden/react-simple-experiment
Simple A/B testing for React
https://github.com/danhayden/react-simple-experiment
ab-testing localforage react variants
Last synced: 10 months ago
JSON representation
Simple A/B testing for React
- Host: GitHub
- URL: https://github.com/danhayden/react-simple-experiment
- Owner: danhayden
- License: mit
- Created: 2017-07-19T18:03:49.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-31T12:30:35.000Z (about 8 years ago)
- Last Synced: 2024-12-03T21:11:43.312Z (over 1 year ago)
- Topics: ab-testing, localforage, react, variants
- Language: JavaScript
- Homepage: https://danhayden.github.io/react-simple-experiment/
- Size: 851 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Simple Experiment
[![version][version]](http://npm.im/react-simple-experiment)
[![MIT License][mit license]](http://opensource.org/licenses/MIT)
[![Standard Version][standard version]](https://github.com/conventional-changelog/standard-version)
[![Size][size]](https://unpkg.com/react-simple-experiment)
[![Size gzip][size gzip]](https://unpkg.com/react-simple-experiment)
Simple A/B testing for React
- Exports `ExperimentConsumer` [Render Prop] and `withExperiments` [HOC] for accessing and modifying experiments
- Persists assigned variant for return visits (using [localForage])
- configurable variants weights
- **Requires React 16.3+** due to utilising new [context]
## Exports
- `ExperimentProvider`
- `ExperimentConsumer`
- `withExperiments`
- `Experiment`
- `Variant`
- `ActiveVariant`
## Usage
### ExperimentProvider, Experiment & Variant
```js
import React, { Component } from "react";
import { render } from "react-dom";
import {
ExperimentProvider,
Experiment,
Variant
} from "react-simple-experiment";
class MyExperiment extends Component {
logExperimentInfo = ({ name, variants, activeVariantId }) => {
console.log({ name, variants, activeVariantId });
};
render() {
return (
Control
Variant 1
);
}
}
class App extends Component {
render() {
return (
);
}
}
render(, document.getElementById("root"));
```
### ExperimentProvider, ActiveVariant & withExperiments
```js
import React, { Component } from "react";
import { render } from "react-dom";
import {
ExperimentProvider,
ActiveVariant,
withExperiments
} from "react-simple-experiment";
class MyExperimentBase extends Component {
componentDidMount() {
this.props.createExperiment({
onLoad: this.logExperimentInfo,
name: "Experiment Name",
variants: {
control: 1, // integer represents variant weight
variant: 1
}
});
}
logExperimentInfo = ({ name, variants, activeVariantId }) => {
console.log({ name, variants, activeVariantId });
};
render() {
return (
Control
Variant 1
);
}
}
const MyExperiment = withExperiments(MyExperimentBase);
class App extends Component {
render() {
return (
);
}
}
render(, document.getElementById("root"));
```
### ExperimentProvider, ExperimentConsumer
```js
import React, { Component } from "react";
import { render } from "react-dom";
import {
ExperimentProvider,
ExperimentConsumer
} from "react-simple-experiment";
class MyExperimentManagerBase extends Component {
setControl = () => {
this.props.setExperimentVariant("Experiment Name", "control");
};
setVariant = () => {
this.props.setExperimentVariant("Experiment Name", "variant");
};
render() {
return (
set control
set variant
);
}
}
const MyExperimentManager = props => (
{context => (
)}
);
class App extends Component {
render() {
return (
);
}
}
render(, document.getElementById("root"));
```
### License
MIT
[version]: https://img.shields.io/npm/v/react-simple-experiment.svg
[mit license]: https://img.shields.io/npm/l/react-simple-experiment.svg
[standard version]: https://img.shields.io/badge/release-standard%20version-brightgreen.svg
[size]: https://badges.herokuapp.com/size/npm/react-simple-experiment
[size gzip]: https://badges.herokuapp.com/size/npm/react-simple-experiment?gzip=true
[localforage]: https://github.com/localForage/localForage
[render prop]: https://reactjs.org/docs/render-props.html
[hoc]: https://reactjs.org/docs/higher-order-components.html
[context]: https://reactjs.org/docs/context.html