ui-experiment.tsx

ui-experiment.tsx

import React from 'react';

export enum ExperimentName {
  a = 'a',
  b = 'b',
}

export type Experiment = {
  [key in ExperimentName]: React.ReactNode;
};

interface IProps extends Experiment {
  /**
   * Used to identify which component variant is active and should be rendered.
   *
   * When `true`, node passed via `b` is always rendered.
   */
  isExperimentActive: boolean;
}

export const UiExperiment: React.FC<IProps> = (props) => {
  return (
    <React.Fragment>
      {!props.isExperimentActive && props.a}
      {props.isExperimentActive && props.b}
    </React.Fragment>
  );
};

UiExperiment.displayName = 'UiExperiment';
UiExperiment.defaultProps = {};