react-abtest
A simple React and React Native AB test component.
Install
yarn add react-abtest
or
npm install react-abtest
Usage
You can either automatically render a component based on the group placement or you can get the group the user is placed in and choose how to handle it yourself.
Render a component
ExperimentRandom
Randomly renders a variant.
; const A = <div>A variant</div>;const B = <div>B variant</div>;const C = <div>C variant</div>; // Optional, but useful for logging test data.const logger = console; const ExampleTest = { return <ExperimentRandom variants=A B C logger=logger /> ;} ;
ExperimentRandomWeighed
Randomly renders a variant based on weight.
; const A = <div>A variant</div>;const B = <div>B variant</div>;const C = <div>C variant</div>; // Optional, but useful for logging test data.const logger = console; const ExampleTest = { return <ExperimentRandomWeighed weights=01 01 08 variants=A B C logger=logger /> ;} ;
ExperimentUniqueId
Renders the same variant based on a unique identifier and experiment name.
; const A = <div>A variant</div>;const B = <div>B variant</div>;const C = <div>C variant</div>; // Optional, but useful for logging test data.const logger = console; const ExampleTest = { return <ExperimentUniqueId experimentName='sample-experiment' uid=uid variants=A B C logger=logger /> ;} ;
ExperimentUniqueIdWeighed
Renders the same variant based on weight, a unique identifier* and experiment name.
- Should be of some length, even though the library support one char id's. Short id's may result in uneven distribution.
; const A = <div>A variant</div>;const B = <div>B variant</div>;const C = <div>C variant</div>; // Optional, but useful for logging test data.const logger = console; const ExampleTest = { return <ExperimentUniqueIdWeighed experimentName='sample-experiment' uid=uid weights=01 01 08 variants=A B C logger=logger /> ;} ;
ExperimentValueGroup
When you already have assigned the users to a group (number), for example in a cookie.
;; const A = <div>A variant</div>;const B = <div>B variant</div>;const C = <div>C variant</div>; const ExampleTest = { const userGroup = Cookies; const variants = group: 1 // Single group component: A group: '2-50' // Range group component: B group: '51-100' component: C ; // Optional, but useful for logging test data. const logger = console; // userGroup = 1, would render A // userGroup = 33 would render B // userGroup = 51 would render C return <ExperimentValueGroup userGroup=userGroup variants=variants logger=logger /> ;} ;
Place user in a group
experimentRandomGroup
Randomly returns a group.
;const exampleTest = { // Optional, but useful for logging test data. const logger = console; const options = groups: 5 // Number of groups to place users in logger ; return ;} ;
experimentRandomWeighedGroup
Randomly returns a group based on weight.
; const exampleTest = { // Optional, but useful for logging test data. const logger = console; const options = weights: 02 08 logger ; return ;} ;
experimentUniqueIdGroup
Returns the same group based on a unique identifier and experiment name.
; const exampleTest = { // Optional, but useful for logging test data. const logger = console; const options = experimentName: 'experimentName' uid logger ; return ;} ;
experimentUniqueIdWeighedGroup
Returns the same group number based on weight, a unique identifier* and experiment name.
- Should be of some length, even though the library support one char id's. Short id's may result in uneven distribution.
;const exampleTest = { // Optional, but useful for logging test data. const logger = console; const options = experimentName: 'experimentName' uid weights: 02 08 logger ; return ; } ;