react-ab-tasty

• 🏞️ Easy to Integrate: Simplifies the implementation of A/B testing in React projects
• 🔍 Logging Support: Integrated logging capabilities for monitoring variant selection
• 🔒 Storage flexibility: Supports both localStorage and sessionStorage for experiment state persistence.

Usage

yarn add react-ab-tasty

import React from 'react';
import { useExperiment } from 'react-ab-tasty';

const MyComponent = () => {
  const { ExperimentComponent } = useExperiment({
    variants: [<VariantA />, <VariantB />], // React components for each variant
    weights: [50, 50], // Probability weights for each variant
    logger: logger: (variant) => console.log(`User placed in group ${variant} from hook`), // Optional logging function
    storageType: 'local', // Optional, 'local' or 'session', defaults to 'local'
    storageKey: 'experimentWin', // Optional, key used in storage, defaults to 'experimentWin'
    enableLogging: false, // Optional, enables logging if true
  });

  return (
    <div>
      {ExperimentComponent}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { Experiment } from 'react-ab-tasty';

const MyComponent = () => {
  const logger = (variant: string) => {
    console.log(`Current variant with component: ${variant}`);
  };

  return (
    <div>
      <Experiment
        weights={[10, 20, 70]}
        variants={[<div>Variant 1</div>, <div>Variant 2</div>, <div>Variant 3</div>]}
        logger={logger}
        storageKey="experimentWithComponent"
      />
    </div>
  );
};

export default MyComponent;

Configuration Options

• variants: An array of React components representing each variant in the experiment
• weights: Corresponding weights for each variant, indicating their selection probability
• logger: A function for logging variant selection. Defaults to a no-op function if not provided
• storageType: Specifies the type of web storage to use ('local' for localStorage or 'session' for sessionStorage). Defaults to 'local'
• storageKey: The key under which the selected variant index is stored. Helps in persisting the experiment across sessions
• enableLogging: If true, enables logging of the selected variant using the provided logger function

Types & Options

type Variant = React.ReactNode;
type LoggerFunction = (variant: string) => void;

enum StorageType {
  Local = 'local',
  Session = 'session',
}

interface UseExperimentProps {
  weights: number[];
  variants: Variant[];
  logger: LoggerFunction;
  storageType?: StorageType;
  storageKey?: string;
  enableLogging?: boolean;
}

interface UseExperimentResult {
  ExperimentComponent: React.ReactNode;
}