Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mfrachet/rn-ab-hoc
:two_men_holding_hands: :two_women_holding_hands: Poor intrusive way to make A/B Testing by using an HoC instead of components
https://github.com/mfrachet/rn-ab-hoc
ab-testing react react-native
Last synced: 3 months ago
JSON representation
:two_men_holding_hands: :two_women_holding_hands: Poor intrusive way to make A/B Testing by using an HoC instead of components
- Host: GitHub
- URL: https://github.com/mfrachet/rn-ab-hoc
- Owner: mfrachet
- Created: 2017-07-03T11:45:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-02T07:23:19.000Z (about 7 years ago)
- Last Synced: 2024-10-02T10:18:38.659Z (4 months ago)
- Topics: ab-testing, react, react-native
- Language: JavaScript
- Homepage:
- Size: 293 KB
- Stars: 25
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - rn-ab-hoc ★19 - Poor intrusive way to make A/B Testing by using an HoC instead of components. (Components / UI)
- awesome-reactnative-ui - rn-ab-hoc
- awesome-react-native - rn-ab-hoc ★19 - Poor intrusive way to make A/B Testing by using an HoC instead of components. (Components / UI)
- awesome-reactnative-ui - rn-ab-hoc
- awesome-react-native - rn-ab-hoc ★19 - Poor intrusive way to make A/B Testing by using an HoC instead of components. (Components / UI)
- awesome-react-native - rn-ab-hoc ★19 - Poor intrusive way to make A/B Testing by using an HoC instead of components. (Components / UI)
README
[](https://travis-ci.org/mfrachet/rn-ab-hoc)
[](https://coveralls.io/github/mfrachet/rn-ab-hoc?branch=master)
[](https://opensource.org/licenses/MIT)
Poor intrusive way to make A/B Testing by using an `HoC` instead of components.
---
---
# Usage
### Installation
```
$ npm install --save rn-ab-hoc
```
### Component
```javascript
/* list.js */
import abConnect from 'rn-ab-hoc';
import FlatList from './flatList.js';
import ListView rom './listView.js';
import OtherList rom './otherList.js';
export default abConnect('ListExperiment',
{ variant: 'FlatList', component: FlatList },
{ variant: 'ListView', component: ListView },
{ variant: 'OtherList', component: OtherList }
);
```
The previous code defines :
- An experiment name
- A list of different variants with their names and associated components
### Using a random variant
```javascript
/* app.js */
import React from 'react';
import List from './list';
export default function App() {
return (
);
}
```
This will load one of the three previous components (variants) defined using a [randomize function](https://github.com/mfrachet/rn-ab-hoc/blob/master/src/reactNativeAbHoc.js#L16)
### Forcing a variant
```javascript
/* app.js */
import React from 'react';
import List from './list';
export default function App() {
return (
);
}
```
This will force a specific variant (maybe sent by your backend) to be used inside the app.
*Note that the forced variant takes over the random one. If you set a variant by forcing it, the previous random one will be erased and replaced by the forced one. Inverse is not true.*
### Which variant am I using ?
```javascript
/* app.js */
import React from 'react';
import List from './list';
export default function App() {
return (
console.log(variant)}
/>
);
}
```
This will print `FlatList`. It also work with random variants.
### Storage
The default storage system is [`AsyncStorage`](https://facebook.github.io/react-native/docs/asyncstorage.html) with a key that follows the pattern :
```javascript
abhoc-variant-${experiment}
```
In the previous case, it would have been :
```
abhoc-variant-ListExperiment
```