useFeatureFlag Example

ExampleComponent.js

import React from 'react';
import useFeatureFlag from './useFeatureFlag';
import RecommendationsComponent from './Recommendations.js';

const { 
  DecoratedComponent: Recommendations, 
  featureEnabled: recommendationsFeatureEnabled,
  FeatureFlag
} = useFeatureFlag({
  Component: RecommendationsComponent,
  feature: 'RECOMMENDATIONS'
});

const ExampleComponent = () => {
  const pageTitle = recommendationsFeatureEnabled ? 'Recommendations' : 'Saved Items';
  
  return <div>
    <h1>{pageTitle}</h1>
      <Recommendations />
      <FeatureFlag>
        <Dependency recommendations={recommendations} />
      </FeatureFlag>
    </div>;
};

Recommendations.js

import React from 'react';

const Recommendations = ({ featureEnabled }) => {
  if (!featureEnabled) {
    return <div>Page Not Found</div>
  }
  
  return <div>
    <h1>Recommendations</h1>
    <div>{recommendations}</div>
  </div>;
  
 }
 
 export default Recommendations;
    
  

This is a marvelous piece. Thank you very much for teaching this.