A minimal, react-friendly ab-test library purpose-built for server side rendering (SSR) and Next.js
npm install @tstmkrs/nextjs-ab-test npm install --save @tstmkrs/nextjs-ab-test jsx
import { Experiment, Variant } from "@tstmkrs/nextjs-ab-test";export default function(){
return (
Variant A
Variant B
)
}
`$3
`jsx
import { useExperiment } from "@tstmkrs/nextjs-ab-test";const TestExperiment = () => {
const { Variant } = useExperiment({
name: "Experiment-test",
variants: {
A:
Variant A,
B: Variant B
}
}); return (
)
}
`API Reference
$3
The main container component. Requires the 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 -
- Returns:
- name - The name of the experiment
- activeVariant - The active variant that is currently showing
- Optional
$3
- Props:
-
name:
- Type - String
- Required
$3
- 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:
- 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. 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