featureFlag component examples

FeatureFlags.jsx

/* 
 * # 1
 * HOC for retrieving and setting a featureFlag prop
 */
const withFlag = (name) => compose(
  connect((state) => {
    const value = featureFlagSelector(state, { featureFlag });
    return { featureFlag, featureFlagValue };
    return { [`flag:${featureFlag}`]: featureFlagValue }; // feature:test-feature
  })
);

// usage
// Card.jsx
class Card extends Component {
//   onClick = () => {
//     const {['flag:test-stuff']: newPopUp } = this.props;
//     this.props.openFeature({ newPopUp });
//   }
  render() {
    return (<div>
      <button onClick={this.props.onClick}>Click here!</button>
   </div>);
  }
// CardContainer.jsx
const CardContainer = compose(
  withFlag('flag:test-feature'),
  withProps(({['flag:test-feature']: newPopUp, openFeature }) => ({
    onClick: () => {openFeature({ newPopUp });
  }
)(Card);



/* 
 * # 2
 * Function as child component
 */
const FACC = ({ featureFlag, featureFlagValue, children }) => children({ featureFlag, featureFlagValue });
const FeatureFlagFACC => compose(
  connect((state, { featureFlag }) => {
    const featureFlagValue = featureFlagSelector(state, { featureFlag });
    return { featureFlag, featureFlagValue };
  }))
)(FACC);

// usage
const useFACCToDisplayFeature = () => (
  <div>
    <FeatureFlagFACC featureFlag="test-feature">
      {({ featureFlag, featureFlagValue }) => ({
        if (featureFlagValue) { return (<div>Hello you got {featureFlag} feature!</div>)}
        return (<div>Hello you got default view!</div>)
      })}
    </FeatureFlagFACC>
  </div>
);



/* 
 * # 3
 * render props
 */
const RenderProps = ({featureFlagValue, renderFeature, renderDefault}) => {
  if (featurFlagValue) {
    return renderFeature(featureFlagValue);
  } else if (renderDefault) {
    return renderDefault();
  }
  return null;
};
const RenderPropsFeatureFlag => compose(
  connect((state, { featureFlag }) => {
    const featureFlagValue = featureFlagSelector(state, { featureFlag });
    return { featureFlagValue };
  }))
)(RenderProps);

// usage
const UseRenderPropsFeatureFlags = () => (
  <div>
    <Flag
      name={TEST_FEATURE}
      render={() => {
        return (<div>Default Here!</div>);
      }}
      fallbackRender={()=>(<div>Default Here!</div>)}
      />
    </div>
)
      


/* 
 * # 4
 * experiment/variation
 */

// usage with multi value
const render = () => (
  <FeatureFlag name="feature:pricing-design">
    <Flag>
      <p>Hello from a feature!</p>
    </Flag>
    <Control>
      <strong>From to the fallback!</strong>
    </Control>
  </FeatureFlag>
)

// usage with multi value
const render = () => (
  <FeatureFlag name="feature:pricing-design">
    <Flag value="A">
      <p>Hello from a feature!</p>
    </Flag>
    <Flag value="B">
      <p>Hello from a feature!</p>
    </Flag>
    <Control>
      <strong>From to the fallback!</strong>
    </Control>
  </FeatureFlag>
)