@amoapps/react-client-split
TypeScript icon, indicating that this package has built-in type declarations

4.0.8 • Public • Published

react-client-split

npm version minified + gzip typescript

Utility for configuring and running ab tests in reactjs applications

Table of contents

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

Package Sidebar

Install

npm i @amoapps/react-client-split

Weekly Downloads

617

Version

4.0.8

License

MIT

Unpacked Size

16.7 kB

Total Files

8

Last publish

Collaborators

  • amo-apps-frontend