useFeatureFlag.js

import React from 'react'
import PropTypes from 'prop-types'

const useFeatureFlag = ({ feature, Component }) => {
  
  // Gives us a boolean we can use generally
  const isEnabled = !!FeatureFlags[feature] && FeatureFlags[feature];
  
  // Gives us a component we can wrap around child components to hide them if 
  // the feature is disabled
  const FeatureFlag = ({ children }) =>
    isEnabled ? (
      <React.Fragment>{children}</React.Fragment>
     ) : (
      <React.Fragment />
     );
      
  FeatureFlag.propTypes = {
      children: PropTypes.arrayOf(PropTypes.element).isRequired
  };

  // Decorates a passed in component with featureEnabled so that 
  // we can add our own conditional logic to our components
  const DecoratedComponent = props => (
    <Component featureEnabled={isEnabled} {...props} />
   );

  return { featureEnabled: isEnabled, FeatureFlag, DecoratedComponent };
}

export default useFeatureFlag;