react-feature-toggle 🚀

A lightweight, production-grade feature flag management system for React. Built with TypeScript, performance, and developer experience in mind.

✨ Features

• ⚡ Minimal Re-renders: Optimized evaluation engine.
• 🛠️ Type-Safe: Strongly typed flags and usage.
• 🌐 Remote Config: Fetch flags from any API with fallback support.
• 🚀 Advanced Targeting: Percentage rollouts and role-based access.
• 💾 Caching: LocalStorage persistence for instant loads.
• 🌑 SSR Support: Compatible with Next.js and server-side rendering.
• 🔍 Debug Mode: Built-in logging for development.

📦 Installation

npm install @abhishek270104/react-feature-toggle

🚀 Quick Start

1. Define your flags

const initialFlags = {
  newDashboard: true,
  betaFeature: {
    enabled: true,
    percentage: 50,
    roles: ['beta-tester']
  }
};

2. Setup Provider

import { FeatureProvider } from '@abhishek270104/react-feature-toggle';

function App() {
  return (
    <FeatureProvider config={initialFlags} context={{ userId: '123', roles: ['admin'] }}>
      <MyContent />
    </FeatureProvider>
  );
}

3. Use Flags

Component Wrapper:

import { Feature } from '@abhishek270104/react-feature-toggle';

<Feature name="newDashboard" fallback={<OldDashboard />}>
  <NewDashboard />
</Feature>

Hook:

import { useFeature } from '@abhishek270104/react-feature-toggle';

function Dashboard() {
  const isEnabled = useFeature('newDashboard');
  return isEnabled ? <New /> : <Old />;
}

🌍 Remote Configuration

<FeatureProvider 
  remoteConfigUrl="https://api.myapp.com/flags"
  fallbackConfig={localFlags}
>
  <App />
</FeatureProvider>

🛠️ API Reference

FeatureProvider

• config: Initial/Static flags.
• remoteConfigUrl: URL to fetch remote flags.
• fallbackConfig: Backup config if remote fetch fails.
• context: User context for evaluation (userId, roles, etc.).
• environment: Override environment detection (development | production).

useFeature(name)

Returns boolean.

Feature

• name: Flag name.
• fallback: Optional React node to show if disabled.

📄 License

MIT © [Your Name]