@farmart-tech/brave-react-adapter

React components and hooks for seamless Brave Ship feature flag integration.

@farmart-tech/brave-react-adapter provides a set of React contexts and hooks to easily consume feature flags in any React application.

Features

• ⚛️ Hooks-first: Modern hooks like useFeatureEnabled for clean integration.
• 🖼️ UI Components: Declarative FeatureFlagGate and FeatureVariant components.
• 🛠️ Context Providers: Dedicated providers for both reading (client) and writing (admin) flags.
• 🔄 Real-time Updates: Automatically re-renders when feature flag configurations change in Firestore.
• 🧩 Type-Safe: Full TypeScript support for feature names and evaluation results.

Installation

npm install @farmart-tech/brave-react-adapter
# or
pnpm add @farmart-tech/brave-react-adapter

Peer Dependencies

• react >=18.0.0
• firebase ^11.5.0
• @farmart-tech/brave-admin-sdk (provides core types)

Quick Start

1. Wrap your application

import { FeatureReaderProvider } from '@farmart-tech/brave-react-adapter';
import { getFirestore } from 'firebase/firestore';

const db = getFirestore(app);

function Root() {
  return (
    <FeatureReaderProvider 
      workspace="production" 
      db={db}
      userContext={{ userId: 'user-123' }}
    >
      <App />
    </FeatureReaderProvider>
  );
}

2. Use the hook

import { useFeatureEnabled } from '@farmart-tech/brave-react-adapter';

function Dashboard() {
  const isEnabled = useFeatureEnabled('new_analytics_dashboard');

  if (isEnabled === null) return <Loading />;
  return isEnabled ? <NewDashboard /> : <StandardDashboard />;
}

3. Use the Gate component

import { FeatureFlagGate } from '@farmart-tech/brave-react-adapter';

function ProfilePage() {
  return (
    <FeatureFlagGate 
      flag="edit_profile_v2" 
      fallback={<SimpleProfile />}
    >
      <AdvancedProfileEditor />
    </FeatureFlagGate>
  );
}

Documentation

Comprehensive API documentation is available at: https://fmt-feature-management.web.app/docs/react-adapter/

License

MIT © FarMart