React Feature Flags

3. Evaluate flags

import { useState, useEffect } from 'react';

// Evaluate a feature flag via FlagBit API
async function getFlag(flagKey, context = {}) {
  const res = await fetch(
    'https://flagbit.anethoth.com/api/v1/evaluate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-SDK-Key': process.env.REACT_APP_FLAGBIT_SDK_KEY
    },
    body: JSON.stringify({
      flag_key: flagKey,
      context: context
    })
  });
  const data = await res.json();
  return data.value;
}

// React hook for feature flags
function useFeatureFlag(flagKey, defaultValue = false) {
  const [enabled, setEnabled] = useState(defaultValue);

  useEffect(() => {
    getFlag(flagKey, { user_id: getCurrentUserId() })
      .then(val => setEnabled(val))
      .catch(() => setEnabled(defaultValue));
  }, [flagKey]);

  return enabled;
}

// Usage in a component
function Dashboard() {
  const showNewChart = useFeatureFlag('new-analytics-chart');

  return (
    <div>
      <h1>Dashboard</h1>
      {showNewChart ? <NewAnalyticsChart /> : <LegacyChart />}
    </div>
  );
}