npm package: @okaygift/react-feature-flags
Description: A simple and flexible feature flag system for React to enable continuous deployment and testing.
Author: OkayGift
Latest version: 1.0.0

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 <FeatureFlagProvider>
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 (
    <FeatureFlagProvider flags={featureFlags}>
      {/* The rest of your application */}
    </FeatureFlagProvider>
  );
}

2. Conditionally Render Components
Use the <Feature> 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={<OldDashboard />}>
      <NewDashboard />
    </Feature>
  );
}

In this example, users will see the <NewDashboard /> 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 <button onClick={handleProfileClick}>View Profile</button>
}

In this example, the click handler will run the old logic because the beta-user-profile flag is false.

API
<FeatureFlagProvider flags={...} />
The top-level provider component.

flags: object (required): An object where keys are feature names and values are booleans.

<Feature name="..." />
A component to conditionally render its children.

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 }.