use-sixpack-client
v0.2.1
Published
Hook integrated with lib sixpack-client, to perform A / B testing.
Downloads
4
Readme
Hook useSixPack for Test A/B
Browser client library sixpack-js A/B testing framework.
Installation
yarn add use-sixpack-client
# or
npm i use-sixpack-client
Usage
useSixPack(name: string, variations: string[], options: Object)
# options: {
# traffic: float // => default: 0.5,
# timeout: number // => default: 4000,
# baseURL: string // => default: null,
# }
Hook return:
{
ready: boolean: => true || false,
variation: string: => name of the variation drawn || null,
convert: function: session.convert || () => {},
}
And in your file you want to run the test:
Basic example:
import React from 'react'
import useSixPack from 'use-sixpack-client'
import ButtonOne from './components/ButtonOne'
import ButtonTwo from './components/ButtonTwo'
export default function App() {
const sixpack = useSixPack('button-test', ['test-a', 'test-b'], {
traffic: 0.6,
timeout: 3000,
baseURL: 'http://127.0.0.1:5000'
});
const Button = sixpack && sixpack.variation === 'test-a' ? ButtonOne : ButtonTwo;
React.useEffect(() => {
if(sixpack.ready) {
sixpack.convert('button-page-loaded')};
}, [sixpack])
return (
<div onClick={() => sixpack.convert('column-click')}>
<Button convert={() => sixpack.convert('button-click')} />
</div>
)
}
Forcing variant
Just create a cookie named force-test_name