@variant-wise/client
v1.0.8
Published
`@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.
Downloads
2
Readme
@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
or
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!
Contact: [email protected]