nextjs-ab-test

A minimal, react-friendly ab-test library purpose-built for server side rendering (SSR) and Next.js

Installation

npm install --save @tstmkrs/nextjs-ab-test

Examples

Class Component Example

import { Experiment, Variant } from "@tstmkrs/nextjs-ab-test";

export default function(){
    return (
        <Experiment name="Experiment-test">
          <Variant name="A">
            <div>
              Variant A
            </div>
          </Variant>
          <Variant name="B">
            <div>
              Variant B
            </div>
          </Variant>
        </Experiment>
    )
}

Hook Example

import { useExperiment } from "@tstmkrs/nextjs-ab-test";

const TestExperiment = () => {
	const { Variant } = useExperiment({
		name: "Experiment-test",
		variants: {
			A: <div>Variant A</div>,
			B: <div>Variant B</div>
		}
	});

	return (
		<div>
			<Variant />
		</div>
	)
}

API Reference

<Experiment />

The main container component. Requires the <Variant /> as a child.

• Props:
  • name:
    • Type - String
    • Required
  • activeVariant:
    • Type - String
    • Needed if you want to set a default variant
    • Optional
  • weights:
    • Type - Array of Numbers
    • Example - [70, 30]
    • Default - [50, 50]
    • Optional
  • onExperimentLoad:
    • Type - Function
    • Example - <Experiment onExperimentLoad={(name, activeVariant) => console.log(name, activeVariant)} />
    • Returns:
      • name - The name of the experiment
      • activeVariant - The active variant that is currently showing
    • Optional

<Variant />

• Props:
  • name:
    • Type - String
    • Required

useExperiment

• Params:

  • Type - Object
  • Props:
    • name:
      • Type - String
      • Required
    • activeVariant:
      • Type - String
      • Needed if you want to set a default variant
      • Optional
    • weights:
      • Type - Array of Numbers
      • Example - [70, 30]
      • Default - [50, 50]
      • Optional
    • variants:
      • Type - Object
      • Note - Key should be the name of the variant and Value should be the Component to render
      • Example - { A: <div>Variant A</div>, B: <div>Variant B</div> }
      • Required

• Returns:

  • Type - Object
  • Props:
    • Variant
      • Type - React.Element
    • experimentName
      • Type - String
    • activeVariant
      • Type - String
    • experimentLoaded
      • Type - Boolean

Testing

We use Enzyme with Jest to test this package. To run these tests, run npm run test and the tests will automatically run.

Coverage

These tests are run using:

• Node: v14.15.4
• NPM: v7.5.6
• React: 16.13.1 and above
• Jest: 26.6.2 and above
• Enzyme: 3.11.0 and above

Alternative Libs

• @marvelapp/react-ab-test
• react-ab-test

Issues

If you are experiencing any bugs or have some ideas for this package, please open up an issue in this repo.

If its bug squashing you seek, please provide:

• NPM and Node Version
• React Version you are currently using
• What you are experiencing
• What you should be experiencing
• Any code you think that can help explain what is going on

Blog Post

Please take a look at this blog post to learn about our adventure into creating this

Contact

In order to get in contact with us, all you have to do is email [email protected] and we will get to you when we can.