useFeature flag hook

useFeatureFlag.tsx

declare global {
  interface Window {
    flags: {
      enableFlag?: (name: string) => void;
      disableFlag?: (name: string) => void;
    };
  }
}

const FeatureFlagsContext = React.createContext({}); // flag names

export function useFeatureFlags() {
  const [flags, setFlags] = React.useState({});

  const enableFlag = React.useCallback(
    (flagName: string) => {
      setFlags((prevFlags) => ({ ...prevFlags, [flagName]: true }));
    },
    [setFlags]
  );

  const disableFlag = React.useCallback(
    (flagName: string) => {
      setFlags((prevFlags) => ({ ...prevFlags, [flagName]: false }));
    },
    [setFlags]
  );

  React.useEffect(() => {
    window.flags = {
      enableFlag,
      disableFlag,
    };
  }, [disableFlag, enableFlag]);

  return flags;
}

export function useIsFeatureFlag(flagName: string) {
  const flags = React.useContext(FeatureFlagsContext);

  return flags[flagName];
}

// usage

function App() {
  const flags = useFeatureFlags();

  return (
    <FeatureFlagsContext.Provider value={flags}>
      <div>
        <h1>Feature Flags</h1>
      </div>
    </FeatureFlagsContext.Provider>
  );
}

function Component() {
  const isFlagEnabled = useIsFeatureFlag("flag-name");
}