@myflags/react NPM

@myflags/react

MyFlags - The modern way to manage feature flags in your applications. Ship features faster, control releases with confidence, and deliver better user experiences.

React bindings for MyFlags SDK, providing hooks and components for easy feature flag management in React applications.

Installation

npm install @myflags/react @myflags/core
# or
yarn add @myflags/react @myflags/core
# or
pnpm add @myflags/react @myflags/core

Usage

Provider Setup

import { MyFlagsProvider } from "@myflags/react";

function App() {
  return (
    <MyFlagsProvider
      config={{
        apiKey: "your-api-key",
        projectId: "your-project-id",
        environment: "production",
        refreshInterval: 600000, // optional, defaults to 10 minutes
        retryCount: 3, // optional, defaults to 3 retries
        retryDelay: 1000, // optional, defaults to 1000ms between retries
      }}
    >
      <YourApp />
    </MyFlagsProvider>
  );
}

Using Hooks

import useFlag from "@myflags/react";

function MyComponent() {
  // Check if a feature is enabled
  const isEnabled = useFlag("feature_key");

  // With default value
  const isEnabledWithDefault = useFlag("feature_key", false);

  if (isEnabled) {
    return <div>New feature is enabled!</div>;
  }

  return <div>Feature is disabled</div>;
}

Using Components

import { FeatureFlag, FeatureValue } from "@myflags/react";

function MyComponent() {
  return (
    <div>
      <FeatureFlag name="feature_key">
        {(enabled) => (enabled ? <NewFeature /> : <OldFeature />)}
      </FeatureFlag>

      <FeatureValue name="theme_color" defaultValue="blue">
        {(color) => <div style={{ color }}>Themed content</div>}
      </FeatureValue>
    </div>
  );
}

Storage

By default, MyFlags stores feature flag data in IndexedDB for persistent storage between browser sessions.

Advanced Usage

Using All Flags

You can access all flags with the useFlags hook:

import { useFlags } from '@myflags/react';

function YourComponent() {
  const flags = useFlags();
  
  return (
    <pre>{JSON.stringify(flags, null, 2)}</pre>
  );
}

API Reference

Components

MyFlagsProvider

The provider component that makes feature flags available to all child components.

<MyFlagsProvider config={config}>
  <YourApp />
</MyFlagsProvider>

Props:

config: Configuration object for the MyFlags SDK
- apiKey: string (required) - Your MyFlags API key
- projectId: string (optional) - Your project ID
- environment: 'production' | 'development' | 'testing' (optional) - Environment to use
- refreshInterval: number (optional) - Refresh interval in milliseconds
- retryCount: number (optional) - Number of retries for failed API requests (defaults to 3)
- retryDelay: number (optional) - Delay between retries in milliseconds (defaults to 1000)

Hooks

useFlag

Hook to check if a feature is enabled.

const isEnabled = useFlag(name: string, defaultValue: boolean = false): boolean;

Best Practices

Provider Placement
- Place the MyFlagsProvider as high as possible in your component tree
- Ensure the provider is mounted before any feature flag checks
- Consider using environment variables for configuration
Performance Optimization
- Use the useFlag hook for boolean flags
- Memoize components that use feature flags with React.memo
- Consider the refresh interval based on your needs
Error Handling
- The SDK handles errors gracefully by returning default values
- Provide fallback UI for when flags are unavailable
- Monitor API responses for potential issues
Testing
- Mock the MyFlags context in tests
- Test both enabled and disabled states
- Test error scenarios

Example

import { MyFlagsProvider } from "@myflags/react";
import useFlag from "@myflags/react";

function App() {
  return (
    <MyFlagsProvider
      config={{
        apiKey: "your-api-key",
        projectId: "your-project-id",
        environment: "production",
        retryCount: 3, // optional, defaults to 3 retries
        retryDelay: 1000, // optional, defaults to 1000ms between retries
      }}
    >
      <Header />
      <MainContent />
      <Footer />
    </MyFlagsProvider>
  );
}

function MainContent() {
  const isNewDashboardEnabled = useFlag("new-dashboard");

  return (
    <main>{isNewDashboardEnabled ? <NewDashboard /> : <OldDashboard />}</main>
  );
}