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 |