Feature Flag

Utility

Feature flag conditional renderer.

Preview

🚫 Beta Feature (flag disabled — showing fallback)

Usage

example.jsx

import { FeatureFlagProvider, useFeatureFlag, FeatureFlag } from "@/components/ui/feature-flag";

export default function Example() {
  return <FeatureFlagProvider />;
}

Source Code

Copy this file into components/ui/feature-flag.jsx in your project.

feature-flag.jsx

"use client";

import { createContext, useContext } from "react";

const FeatureFlagContext = createContext({});

function FeatureFlagProvider({ children, flags = {} }) {
  return <FeatureFlagContext.Provider value={flags}>{children}</FeatureFlagContext.Provider>;
}

function useFeatureFlag(flag) { return useContext(FeatureFlagContext)[flag] ?? false; }

function FeatureFlag({ flag, children, fallback = null }) {
  const enabled = useFeatureFlag(flag);
  return enabled ? children : fallback;
}

export { FeatureFlagProvider, useFeatureFlag, FeatureFlag };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge