FlagsOn Component

Simple and clean conditional rendering when flags are enabled

Table of Contents

Component Overview

Understanding the FlagsOn component and when to use it

The FlagsOn component is a simplified version of the Flags component, designed for straightforward conditional rendering when flags are enabled.

When to Use FlagsOn

✓
Simple On/Off Logic: When you only need to show content when flags are enabled
✓
Cleaner Code: More semantic and readable than the general Flags component
✓
Team Clarity: Makes intent obvious to other developers
✓
Multiple Flags: Supports checking multiple flags with AND/OR logic

Best Practice

Use FlagsOn when you want to show content only when flags are enabled. For the opposite (showing content when flags are disabled), use the FlagsOff component.

Basic Usage

Simple conditional rendering with a single flag

The most common use case is showing content when a single flag is enabled:

Basic Example
import { FlagsOn } from '@pursuit-amsterdam/feature-flags';

function MyComponent() {
  return (
    <div>
      <h1>Welcome to our app!</h1>
      
      <FlagsOn authorizedFlags="showBetaFeatures">
        <div className="beta-banner">
          <h2>🚀 Try our new beta features!</h2>
          <p>You're seeing this because beta features are enabled.</p>
          <button>Explore Beta Features</button>
        </div>
      </FlagsOn>
      
      <FlagsOn authorizedFlags="enableDarkMode">
        <button className="dark-mode-toggle">
          🌙 Dark mode is available!
        </button>
      </FlagsOn>
    </div>
  );
}

Interactive Example

Toggle flags to see content appear and disappear

Application Content:

Enable some flags above to see conditional content!

Multiple Flags

Working with multiple flags and logical operators

FlagsOn supports checking multiple flags at once. Use exactFlags to control the logic:

Multiple Flags Example
// Show content when ANY flag is enabled (OR logic)
<FlagsOn 
  authorizedFlags={['premiumFeatures', 'showBetaFeatures']} 
  exactFlags={false}
>
  <PremiumOrBetaContent />
</FlagsOn>

// Show content when ALL flags are enabled (AND logic)
<FlagsOn 
  authorizedFlags={['premiumFeatures', 'superAdmin']} 
  exactFlags={true}
>
  <SuperAdminPremiumContent />
</FlagsOn>

Multiple Flags Demo

Experiment with different flag combinations

OR Logic: Premium OR Beta (exactFlags=false)

Content hidden - enable premiumFeatures OR showBetaFeatures to see it

AND Logic: Premium AND SuperAdmin (exactFlags=true)

Content hidden - enable BOTH premiumFeatures AND superAdmin to see it

vs Flags Component

Understanding when to use FlagsOn vs the general Flags component

Both components serve similar purposes, but they're optimized for different use cases:

FlagsOn Component

✓Simple and semantic
✓Clear intent (show when ON)
✓Supports multiple flags
✗No render props
✗No custom conditions
Best for: Simple on/off scenarios

Flags Component

✓Full flexibility
✓Render props support
✓Custom conditions
✓Complex business logic
~More verbose
Best for: Complex conditional logic

Code Comparison

Using FlagsOn

<FlagsOn authorizedFlags="newFeature">
  <NewFeatureComponent />
</FlagsOn>

Using Flags

<Flags authorizedFlags="newFeature">
  <NewFeatureComponent />
</Flags>

Recommendation

Use FlagsOn for simple scenarios where you just need to show content when flags are enabled. Use Flags when you need render props, custom conditions, or complex logic.

API Reference

Complete reference for the FlagsOn component

Props

PropTypeRequiredDescription
authorizedFlagsstring | string[]YesFlag name(s) to check for enabled state
exactFlagsbooleanNoWhen true, ALL flags must be enabled. When false, ANY flag can be enabled. Default: true
childrenReactNodeYesContent to render when conditions are met

Next: FlagsOff Component

Now that you understand FlagsOn, learn about its counterpart for showing content when flags are disabled.

FlagsOff Component →← Back to Flags