Simple hook to handle featue flags

reactreacthookcustomhooksredux

Let's say you want to enable or disable some features based on users role or some permission that the user is granted in the frontend. You could do this with a simple conditional rendering in each component by checking for users permission

<div>{role === 'guest' && <GuestBanner />}</div>

But this is really messy if you have to do this in multiple components. We could instead create a custom hook that returns Boolean saying if we should enable or disable the feature

import { useSelector } from 'react-redux';

const useFeature = (feature) => {
  // If you use something other than redux replace useSelector with equivalent
  // getRole is selector to select user role from redux state
  const role = useSelector(getRole);

  if (feature === 'guestBanner') {
    if (role === 'guest') return true;

    return false;
  }

  return true;
};

And then in your component you use this as follows

import useFeature from './use-feature';

const GuestBanner = () => {
  const enable = useFeature('guestBanner');

  if (!enable) return null;

  return <h1>Guest Banner</h1>;
};

This post is also available on DEV.