https://github.com/kelvne/ab-react
A/B testing component for React, works with SSR and CSR.
https://github.com/kelvne/ab-react
ab-testing react reactcomponent
Last synced: 8 months ago
JSON representation
A/B testing component for React, works with SSR and CSR.
- Host: GitHub
- URL: https://github.com/kelvne/ab-react
- Owner: kelvne
- License: mit
- Created: 2024-09-19T19:28:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-04T18:23:07.000Z (about 1 year ago)
- Last Synced: 2025-04-15T15:05:40.912Z (8 months ago)
- Topics: ab-testing, react, reactcomponent
- Language: TypeScript
- Homepage:
- Size: 191 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ab-react
If this component helped you or your team, please give it a GitHub 🌟!
## Examples
- Using SSR and CSR with [Next.js](#nextjs)
- Plain CSR with [Vite.js](#vitejs)
---
## Installation
```sh
yarn add ab-react
```
or
```sh
npm install -S ab-react
```
## Usage
**This is mainly for AB testing, it will work with multiple children but try to stick with two.**
### Normal use case
In the following example, three things can happen:
1 - The ABReact component will randomize one of the children and store the value on a cookie, after that the user will always see the same version.
2 - If a version is set on the cookie with the defined cookie name, that version will be rendered.
3 - If a version is set on the cookie with the defined cookie name but the child doesn't exist null will be returned.
**No matter what scenario happens, the trackVersion event will be called each time the component is rendered.**
```tsx
import * as React from 'react';
import { useCallback } from 'react';
import ABReact from 'ab-react';
export default function MyComponent() {
const trackVersion = useCallback((version: number) => {
gtag('event', 'screen_view', {
'screen_name': 'MyComponent',
'version': version,
});
});
return (
Version 1
Version 2
)
}
```
### If you are already using react-cookies and CookiesProvider
If you already has a top-level CookiesProvider mounted you can set a property so the ABReact won't mount the CookiesProvider internally:
```tsx
import * as React from 'react';
import { useCallback } from 'react';
import ABReact from 'ab-react';
export default function MyComponent() {
return (
Version 1
Version 2
)
}
```
### Forcing a version
If you want to force a version to be rendered (to disable one or to maintain SSR consistency), you can set the property forceVersion:
```tsx
import * as React from 'react';
import { useCallback } from 'react';
import ABReact from 'ab-react';
export default function MyComponent() {
return (
Version 1
Version 2 {/* This version will always be rendered */}
)
}
```
## Examples
### Vite.js
**Using only CSR (Client Side Rendering)**
```tsx
import { useState, useCallback } from 'react';
import ABReact from 'ab-react';
export default function ABTesting() {
const [selectedState, setSelectedState] = useState('');
const eventExample = useCallback((version: number) => {
setSelectedState(version.toString());
/**
* Do any tracking here such as sending an event to Google Analytics
*/
}, [setSelectedState]);
return (
Normal scenario for a pure client side rendering (CSR)
1
2
Selected version for cookie-1 (returned by the callback): { selectedState }
);
}
```
### Next.js
**Using SSR (Server Side Rendering), CSR (Client Side Rendering) and AppRouter**
page.tsx:
```tsx
/* file: page.tsx */
import { cookies } from 'next/headers';
import Components from './components';
export default function ABTestings() {
const v1 = Number(cookies().get('cookie-1')?.value);
const v2 = Number(cookies().get('cookie-2')?.value);
console.log(cookies().get('cookie-1'));
return (
);
}
```
components.tsx:
```tsx
/* file: components.tsx */
'use client';
import { useState, useCallback } from 'react';
import ABReact from 'ab-react';
export default function Components({ v1, v2 }: { v1?: number, v2?: number }) {
const [selectedState, setSelectedState] = useState('');
const eventExample = useCallback((version: number) => {
setSelectedState(version.toString());
/**
* Do any tracking here such as sending an event to Google Analytics
*/
}, [setSelectedState]);
return (
Normal scenario, after SSR forces version from v1
1
2
Another scenario, after SSR forces version from v2 and runs an callback when the version is rendered
1
2
Selected version for cookie-2 (returned by the callback): { selectedState }
Forced version scenario, no internal choosing. Version hard coded.
1
2 forced
);
}
```