Flags Component

The most versatile component for conditional rendering based on feature flags

Component Overview

Understanding the Flags component and its capabilities

The Flags component is the most powerful and flexible component in the library. It supports multiple rendering patterns and complex conditional logic.

Key Features

✓

Single or Multiple Flags: Check one flag or combine multiple flags with AND/OR logic

✓

Render Props: Access to matching flags for dynamic content

✓

Custom Logic: Advanced conditional requirements with requiresCondition prop

✓

Type Safety: Full TypeScript support with auto-completion

When to Use Flags Component

Use the Flags component when you need the most flexibility: multiple flag conditions, render props, or complex conditional logic. For simpler cases, consider FlagsOn or FlagsOff components.

Basic Usage

Simple conditional rendering with a single flag

The simplest usage checks a single flag and renders content when it's enabled:

Basic Example

import { Flags } from '@pursuit-amsterdam/feature-flags';

function MyComponent() {
  return (
    <div>
      <h1>My Application</h1>
      
      <Flags authorizedFlags="useNewHeader">
        <div className="new-header">
          <h2>✨ New Header Design</h2>
          <p>This header only appears when the flag is enabled!</p>
        </div>
      </Flags>
    </div>
  );
}

Interactive Example

Try toggling the 'useNewHeader' flag to see the content appear/disappear

← Click to toggle

Application Content:

✨ New Header Design

This modern header only appears when the 'useNewHeader' flag is enabled!

Multiple Flags

Combining multiple flags with AND/OR logic

You can check multiple flags at once. Use exactFlags to control whether ALL flags must be enabled (true) or ANY flag (false).

Multiple Flags Example

// ANY flag enabled (OR logic)
<Flags 
  authorizedFlags={['premiumFeatures', 'showBetaFeatures']} 
  exactFlags={false}
>
  <PremiumOrBetaContent />
</Flags>

// ALL flags enabled (AND logic)
<Flags 
  authorizedFlags={['premiumFeatures', 'superAdmin']} 
  exactFlags={true}
>
  <AdminPremiumContent />
</Flags>

Multiple Flags Demo

Try different combinations to see how exactFlags affects visibility

OR Logic (exactFlags=false): Premium OR Beta

Content hidden - enable premiumFeatures OR showBetaFeatures

AND Logic (exactFlags=true): Premium AND SuperAdmin

Content hidden - enable BOTH premiumFeatures AND superAdmin

Render Props Pattern

Access matching flags for dynamic content

When using multiple flags, you can access which flags are actually enabled through the render props pattern:

Render Props Example

<Flags 
  authorizedFlags={['premiumFeatures', 'showBetaFeatures', 'debugMode']} 
  exactFlags={false}
>
  {(matchingFlags) => (
    <div>
      <h3>Active Features:</h3>
      <ul>
        {matchingFlags.map(flag => (
          <li key={flag}>{flag} is enabled!</li>
        ))}
      </ul>
    </div>
  )}
</Flags>

Render Props Demo

See which flags are active and how they affect the rendered content

Dynamic Content Based on Active Flags:

Enable any flag above to see the render props in action!

Complex Conditional Logic

Advanced conditions with requiresCondition prop

For complex business logic, use the requiresCondition prop to create custom conditional requirements:

Complex Logic Example

<Flags 
  authorizedFlags="debugMode"
  requiresCondition={(flags) => 
    (flags.superAdmin ?? false) && 
    !(flags.maintenanceMode ?? false)
  }
>
  <DebugPanel />
</Flags>

// Multiple conditions
<Flags 
  authorizedFlags="enableAnalytics"
  requiresCondition={(flags) => 
    (flags.premiumFeatures ?? false) || 
    ((flags.showBetaFeatures ?? false) && (flags.debugMode ?? false))
  }
>
  <AnalyticsDashboard />
</Flags>

Complex Logic Demo

See how requiresCondition allows for sophisticated conditional rendering

Debug Panel: debugMode AND superAdmin AND NOT maintenanceMode

Visible when: debugMode=false AND superAdmin=false AND maintenanceMode=false

Analytics: enableAnalytics AND (premiumFeatures OR (showBetaFeatures AND debugMode))

Condition: premiumFeatures=false OR (showBetaFeatures=false AND debugMode=false)

API Reference

Complete reference for the Flags component

Props

Prop	Type	Required	Description
authorizedFlags	string \| string[]	Yes	Flag name(s) to check
exactFlags	boolean	No	When true, ALL flags must be enabled. When false, ANY flag can be enabled. Default: true
requiresCondition	(flags) => boolean	No	Custom condition function for complex logic
children	ReactNode \| Function	Yes	Content to render or render function

Explore More Components

Ready to see the other components in action? Check out the simplified FlagsOn and FlagsOff components.

FlagsOn Component →FlagsOff Component →Admin Panel →