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.

$3

#### ExperimentRandom

Randomly renders a variant.

``js
import { ExperimentRandom } from 'react-abtest';

const A =

// Optional, but useful for logging test data.
const logger = (variant) => console.log(User placed in group ${variant}.);

const ExampleTest = () => {
return (
variants={[A, B, C]}
logger={logger}
/>
);
}

export default ExampleTest;
`

#### ExperimentRandomWeighed

Randomly renders a variant based on weight.

`js
import { ExperimentRandomWeighed } from 'react-abtest';

const A =

// Optional, but useful for logging test data.
const logger = (variant) => console.log(User placed in group ${variant}.);

const ExampleTest = () => {
return (
weights={[0.1, 0.1, 0.8]}
variants={[A, B, C]}
logger={logger}
/>
);
}

export default ExampleTest;
`

#### ExperimentUniqueId

Renders the same variant based on a unique identifier and experiment name.

`js
import { ExperimentUniqueId } from 'react-abtest';

const A =

// Optional, but useful for logging test data.
const logger = (variant) => console.log(User placed in group ${variant}.);

const ExampleTest = ({ uid }) => {
return (
experimentName={'sample-experiment'}
uid={uid}
variants={[A, B, C]}
logger={logger}
/>
);
}

export default ExampleTest;
`

#### 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.

`js
import { ExperimentUniqueIdWeighed } from 'react-abtest';

const A =

// Optional, but useful for logging test data.
const logger = (variant) => console.log(User placed in group ${variant}.);

const ExampleTest = ({ uid }) => {
return (
experimentName={'sample-experiment'}
uid={uid}
weights={[0.1, 0.1, 0.8]}
variants={[A, B, C]}
logger={logger}
/>
);
}

export default ExampleTest;
`

#### ExperimentValueGroup

When you already have assigned the users to a group (number), for example in a cookie.

`js
import Cookie from 'cookies';
import { ExperimentValueGroup } from 'react-abtest';

const A =

// Optional, but useful for logging test data.
const logger = (variant) => console.log(User placed in group ${variant}.);

// userGroup = 1, would render A
// userGroup = 33 would render B
// userGroup = 51 would render C
return (
userGroup={userGroup}
variants={variants}
logger={logger}
/>
);
}

export default ExampleTest;
`

$3

#### experimentRandomGroup

Randomly returns a group.

`js
import { experimentRandomGroup } from 'react-abtest';
const exampleTest = () => {
// Optional, but useful for logging test data.
const logger = (group) => console.log(User placed in group ${group}.);

const options = {
groups: 5, // Number of groups to place users in
logger,
};

return experimentRandomGroup(options);
}

export default exampleTest;
`


#### experimentRandomWeighedGroup

Randomly returns a group based on weight.

`js
import { experimentRandomWeighedGroup } from 'react-abtest';

const exampleTest = () => {
// Optional, but useful for logging test data.
const logger = (group) => console.log(User placed in group ${group}.);

const options = {
weights: [0.2, 0.8],
logger,
};

return experimentRandomWeighedGroup(options);
}

export default exampleTest;
`

#### experimentUniqueIdGroup

Returns the same group based on a unique identifier and experiment name.

`js
import { experimentUniqueIdGroup } from 'react-abtest';

const exampleTest = ({ uid }) => {
// Optional, but useful for logging test data.
const logger = (group) => console.log(User placed in group ${group}.);

const options = {
experimentName: 'experimentName',
uid,
logger,
};

return experimentUniqueIdGroup(options);
}

export default exampleTest;
`

#### 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.

`js
import { experimentUniqueIdWeighedGroup } from 'react-abtest';
const exampleTest = ({ uid }) => {
// Optional, but useful for logging test data.
const logger = (group) => console.log(User placed in group ${group}.);

const options = {
experimentName: 'experimentName',
uid,
weights: [0.2, 0.8],
logger,
};

return experimentUniqueIdWeighedGroup(options);

}

export default exampleTest;
``