Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michael-sulyak/react-split-testing
Simple A/B testing component for React
https://github.com/michael-sulyak/react-split-testing
ab-testing react ssr
Last synced: 5 days ago
JSON representation
Simple A/B testing component for React
- Host: GitHub
- URL: https://github.com/michael-sulyak/react-split-testing
- Owner: michael-sulyak
- License: mit
- Created: 2018-11-10T15:40:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:38:30.000Z (about 2 years ago)
- Last Synced: 2024-08-10T16:18:05.948Z (6 months ago)
- Topics: ab-testing, react, ssr
- Language: JavaScript
- Homepage:
- Size: 2.79 MB
- Stars: 72
- Watchers: 2
- Forks: 4
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-split-testing
[](https://www.npmjs.com/package/react-split-testing) [](https://scrutinizer-ci.com/g/expert-m/react-split-testing/?branch=master) [](https://scrutinizer-ci.com/g/expert-m/react-split-testing/build-status/master) [](https://github.com/expert-m/react-split-testing/issues) [](https://gitter.im/expert_m/react-split-testing) [](https://opensource.org/licenses/MIT)
> 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.
```js
Version A
Version B
```
#### [Example](https://github.com/expert-m/react-split-testing/tree/master/examples/simple) ([Demo](https://expert-m.github.io/react-split-testing/))
## Table Of Contents
- [Installation](#installation)
- [npm](#npm)
- [yarn](#yarn)
- [Usage](#usage)
- [Server Rendering](#server-rendering)
- [API Reference](#api-reference)
- [``](#experiment-)
- [``](#variant-)
- [License](#license)
## Installation
#### npm
```bash
npm install react-split-testing
```
#### yarn
```bash
yarn add react-split-testing
```
## Usage
```jsx
import { Experiment, Variant } from 'react-split-testing'
class App extends Component {
render() {
return (
console.log(experimentName, variantName)}
>
Section A
Section B
)
}
}
```
[back to top](#table-of-contents)
---
### Server Rendering
A [``](#experiment-) with a `userIdentifier` property will choose a consistent [``](#variant-) suitable for server side rendering.
#### Example
```jsx
import { Experiment, Variant } from 'react-split-testing'
class App extends Component {
render() {
return (
Section A
Section B
)
}
}
```
[back to top](#table-of-contents)
---
## API Reference
### ``
Experiment container component. Children must be of type [`Variant`](#variant-).
* **Properties:**
* `name` - Name of the experiment.
* **Required**
* **Type:** `string`
* **Example:** `"My Example"`
* `userIdentifier` - Distinct user identifier. Useful for [server side rendering](#server-rendering).
* **Optional**
* **Type:** `string`
* **Example:** `"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](#server-rendering).
* **Optional**
* **Type:** `string`
* **Example:** `"A"`
* `onChoice` - Called when a [`Variant`](#variant-) has been chosen for your [`Experiment`](#experiment-).
* **Optional**
* **Type:** `function`
* **Example:** `(experimentName, variantName) => { console.log(experimentName, variantName) }`
* `onRawChoice` - Same as `onChoice`, but the objects passed are React component instances.
* **Optional**
* **Type:** `function`
* **Example:** `(experiment, variant) => { console.log(experimentName.getName(), variant.props.name) }`
* **Methods:**
* `getName()` - Returns the [`Experiment`](#experiment-) name.
* `getActiveVariant()` - Returns the currently displayed [`Variant`](#variant-).
* `getActiveVariantName()` - Returns the currently displayed [`Variant`](#variant-) name.
* `getVariant(variantName)` - Returns the instance of the specified [`Variant`](#variant-) name.
[back to top](#table-of-contents)
---
### ``
Variant container component.
* **Properties:**
* `name` - Name of the variant.
* **Required**
* **Type:** `string`
* **Example:** `"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.
* **Optional**
* **Type:** `number`
* **Default:** `1`
* **Example:** `2`
* **Methods:**
* `getName()` - Returns the [`Variant`](#variant-) name.
* `getWeight()` - Returns the [`Variant`](#variant-) weight.
[back to top](#table-of-contents)
---
## License
MIT