Feature-Flag Driven Components (React + TypeScript)

A practical, production-style example of building feature-flag driven UI in React using clean architectural boundaries and type-safe flags.

This repo focuses on how feature flags should be integrated, not just toggled.

---

What This Demo Shows

• Centralised, type-safe feature flag definitions
• Feature flag provider pattern
• Clean feature boundary component
• Runtime flag toggling (simulated admin/debug UI)
• Zero flag leakage into feature components
• Easy rollback and deletion after rollout

Designed to mirror how feature flags are used in real-world frontend systems.

---

Why Feature Flags Matter

Feature flags enable teams to:

• Gradually roll out new functionality
• Instantly disable broken features (kill switch)
• Run A/B tests or experiments
• Deploy safely without risky releases

The challenge is keeping flag logic out of your UI components.

This repo demonstrates a scalable way to do that.

---

Core Idea: Feature Boundaries

Instead of scattering flag checks across components, we introduce a Feature boundary:

<Feature flag={FLAGS.NEW_SEARCH_UI} on={<SearchV2 />} off={<SearchV1 />} />

• UI components don’t know about flags
• Flag logic lives in one place
• Easy to remove once rollout is complete

---

❌ Bad Pattern (Common Mistake)

if (flags.newSearchUI) {
  return <NewSearch />;
}
return <OldSearch />;

Problems:

• Flags spread across the codebase
• Hard to delete after rollout
• UI polluted with rollout logic

---

✅ Good Pattern (This Repo)

• Centralised flags
• Typed flag keys
• Feature boundary component
• Clear separation of concerns

This keeps the codebase clean, testable, and rollback-friendly.

---

Demo Features

• Toggle feature flags live via UI
• Switch between old and new implementations instantly
• Simulates how admin/debug tooling works in production apps

---

🗂️ Project Structure

src/
  featureFlags/
    flags.ts
    FeatureFlagProvider.tsx
    useFeatureFlag.ts
    Feature.tsx
    FeatureFlagToggle.tsx
  features/
    search/
      SearchV1.tsx
      SearchV2.tsx
  App.tsx

---

Tech Stack

• React
• TypeScript
• Vite
• Plain CSS (intentionally minimal)

---

Installation

npm install
npm run dev

Open http://localhost:5173

---

Notes

• Feature flags are mocked locally for simplicity

• In real systems, flags typically come from:

  • Backend APIs
  • LaunchDarkly
  • Split.io
  • Custom config services

The architecture remains the same.

---

📄 License

MIT