@amoapps/react-client-split

react-client-split

Utility for configuring and running ab tests in reactjs applications

Table of contents

• Installation
• Usage
• Props

Installation

npm

npm install @amoapps/react-client-split --save

yarn

yarn add @amoapps/react-client-split

Usage

import { useCallback } from 'react';
import ReactClientSplit from '@amoapps/react-client-split';
import { useRouter } from 'next/router';

const splitGroups = {
  splitTestName: {
    // test name
    coverage: 0.5, // what proportion of users should get into the test (0 - 0%, 1 - 100%, 0.5 - 50%...)
    path: ['/start-path/url'], // split test start url
    options: [
      // distribution options
      {
        id: 'option_1_id',
        url: '/option_1/url',
        weight: 50, // what proportion of users should get into this option
        // (if option1.weight = 60 && option2.weight = 20 -> option1.weight = 75% of users && option1.weight = 25%)
        // (if option1.weight = 1 && option2.weight = 3 && option3.weight = 1 -> option1.weight = 20% of users && option1.weight = 60% && option3.weight = 20%)
      },
      {
        id: 'option_2_id',
        url: '/option_2/url',
        weight: 50,
      },
    ],
    condition: { urlQuery: [], cookie: [], common: [] },
  },
};

function ReactClientSplitExample() {
  const router = useRouter();

  const currentPath = router.asPath;

  const handleSplitGroupHit = useCallback((splitResult) => {
    console.log({
      name: splitResult.name,
      option: splitResult.option,
    });

    return true;
  }, []);

  const handleSplitRedirect = useCallback((splitResult) => {
    // redirect to `splitResult`
  }, []);

  return (
    <>
      <ReactClientSplit
        groups={splitGroups}
        onHit={handleSplitGroupHit}
        onRedirect={handleSplitRedirect}
        contentElement=".content"
        currentPath={currentPath}
      />

      <div className="content">Some content here</div>
    </>
  );
}

export default ReactClientSplitExample;

Props

Name	Type	Default Value	Description
splitGroups	{}		config
contentElement	string		CSS selector of the element that contains the content that will be changed based on the results of the split test
onHit	function		function that will be called in case of getting into a split group
onRedirect	function
getIsEnabled	function
currentPath	string		Current page URL