bitflik-react

React SDK for BitFlik feature flags with localStorage caching and background sync.

Installation

npm install bitflik-react
# or
yarn add bitflik-react

Usage

1. Wrap your app with BitFlikProvider

import { BitFlikProvider } from 'bitflik-react';

function App() {
  return (
    <BitFlikProvider 
      apiKey="bf_live_your_api_key"
      apiUrl="https://api.bitflik.com"
    >
      <YourApp />
    </BitFlikProvider>
  );
}

2. Use the useFlag hook

import { useFlag } from 'bitflik-react';

function MyComponent() {
  const { isEnabled, loading } = useFlag('new-feature-x', false);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {isEnabled && <NewFeature />}
      {!isEnabled && <OldFeature />}
    </div>
  );
}

Features

• 🚀 Local Storage Caching: Flags are cached locally with 60s TTL
• 🔄 Background Sync: Automatic background updates
• ⚡ Zero Latency: Reads from cache, updates in background
• 🛡️ Rate Limit Safe: Returns default value on 429 errors
• 💪 TypeScript Support: Fully typed

API

BitFlikProvider

interface BitFlikProviderProps {
  apiKey: string;        // Your BitFlik API key
  apiUrl?: string;       // Optional: Custom API URL
  children: ReactNode;
}

useFlag

function useFlag(
  key: string,           // Flag key
  defaultValue?: boolean // Default value if flag not found
): {
  isEnabled: boolean;    // Current flag value
  loading: boolean;      // Loading state
}

License

MIT