React Feature Flags A simple and flexible feature flag system for React, designed to enable continuous deployment, A/B testing, and safe feature rollouts.

The Problem When developing new features, you often want to deploy them to production behind a "flag" so you can test them internally or release them to a small subset of users before a full launch. Managing the conditional logic to show or hide these features can clutter your components and become difficult to manage.

The Solution This library provides a clean, context-based system for managing feature flags. It gives you both a component and a hook to conditionally render parts of your UI based on a centralized flag configuration.

Installation npm install @your-username/react-feature-flags

How to Use

1. Wrap your app in In your main App.tsx, wrap your application with the FeatureFlagProvider and pass it your feature flag configuration. This object can be loaded from a config file, an API, or even localStorage.

// In your main App.tsx import { FeatureFlagProvider } from '@your-username/react-feature-flags';

const featureFlags = { 'new-dashboard-layout': true, // This feature is ON 'beta-user-profile': false, // This feature is OFF };

function App() { return ( {/* The rest of your application */} ); }

2. Conditionally Render Components Use the component to easily show or hide parts of your UI.

import { Feature } from '@your-username/react-feature-flags'; import { OldDashboard, NewDashboard } from './Dashboards';

function DashboardPage() { return ( <Feature name="new-dashboard-layout" fallback={}> ); }

In this example, users will see the because its flag is true.

3. Use the Hook for Complex Logic For more complex scenarios where you need to do more than just render a component, use the useFeature hook.

import { useFeature } from '@your-username/react-feature-flags';

function UserProfile() { const { isEnabled } = useFeature('beta-user-profile');

const handleProfileClick = () => { if (isEnabled) { // Logic for the new beta profile } else { // Logic for the old profile } };

return View Profile }

In this example, the click handler will run the old logic because the beta-user-profile flag is false.

API The top-level provider component.

flags: object (required): An object where keys are feature names and values are booleans.

name: string (required): The name of the feature flag to check.

children: React.ReactNode: Rendered if the flag is true.

fallback?: React.ReactNode: Rendered if the flag is false.

useFeature(name) A hook to check if a feature is enabled.

name: string (required): The name of the feature flag to check.

Returns: An object { isEnabled: boolean }.