Documentation | MyFlags.io

Getting Started with React

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

Installation

npm install @myflags/react @myflags/core

Provider Setup

First, wrap your application with the MyFlagsProvider:

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
      }}
    >
      <YourApp />
    </MyFlagsProvider>
  );
}

Using Hooks

Use the useFlag hook to check if a feature is enabled:

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

Use the FeatureFlag and FeatureValue 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>
  );
}

Features

Context-Based

Built on React Context for optimal performance and re-rendering.

Type Safety

Full TypeScript support with type-safe flag names and values.

Environment Support

Manage different flag states across development, staging, and production environments.

Performance

Optimized for performance with efficient updates and minimal re-renders.

React Integration