@variant-wise/client NPM

@variant-wise/client

@variant-wise/client is a React A/B testing library that enables you to easily set up and manage experiments in your React applications. It provides components that allow you to define experiments and render specific variants based on user assignments.

Features

Simple integration with React applications.
Define experiments and their variants using components.
Automatically handle user assignments to experiment variants.
Lightweight and well-tested for reliability.

Installation

npm install @variant-wise/client

yarn add @variant-wise/client

Usage

Get started with your experiment in less than 3 minutes

Go to variantwise.com and grab your API Key.
Wrap your application in the provider.
Pass your api key.

import { VariantProvider } from '@variant-wise/client';

ReactDOM.render(
  <React.StrictMode>
    <VariantProvider apiKey={your_api_key}>
      <App />
    </VariantProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Import Experiment and Variant components

import { Experiment, Variant, useVariant } from '@variant-wise/client';

Use with your components

const App = () => {
  const { conversion } = useVariant();
  const experimentName = 'Homepage CTA';
  return (
    <div className="App">
      <Experiment name={experimentName}>
        <Variant name="Blue Button">
          <BlueButton onClick={() => conversion(experimentName)}>Variant Wise</BlueButton>
        </Variant>
        <Variant name="Orange Button">
          <OrangeButton onClick={() => conversion(experimentName)}>Variant Wise</OrangeButton>
        </Variant>
      </Experiment>
    </div>
  );
};

You can then use the conversion function from useVariant hook which will send conversion data to the variantwise dashboard! Make sure to pass same experiment name in conversion function!