FlagsOff Component

Show content when flags are disabled - perfect for fallbacks and legacy content

Component Overview

Understanding the FlagsOff component and its purpose

The FlagsOff component is the inverse of FlagsOn. It shows content when flags are disabled, making it perfect for displaying fallback content, legacy implementations, or default states.

Perfect for These Scenarios

⚙

Legacy Fallbacks: Show existing functionality while new features are disabled

🔄

Gradual Migration: Maintain old implementations during feature rollouts

💡

Default States: Show standard content when experimental features are off

🎯

Safety Nets: Ensure users always see functional content

Complementary Design

FlagsOff is designed to work perfectly alongside FlagsOn. Together, they provide complete coverage for all flag states without complex conditional logic.

Basic Usage

Simple inverse conditional rendering

The most straightforward use case is showing default or legacy content when a flag is disabled:

Basic Example

import { FlagsOn, FlagsOff } from '@pursuit-amsterdam/feature-flags';

function Header() {
  return (
    <header>
      {/* New header when flag is enabled */}
      <FlagsOn authorizedFlags="useNewHeader">
        <div className="modern-header">
          <h1>🚀 New Modern Header</h1>
          <nav>Advanced Navigation</nav>
        </div>
      </FlagsOn>
      
      {/* Legacy header when flag is disabled */}
      <FlagsOff authorizedFlags="useNewHeader">
        <div className="legacy-header">
          <h1>Classic Header</h1>
          <nav>Traditional Navigation</nav>
        </div>
      </FlagsOff>
    </header>
  );
}

Interactive Example

Toggle the flag to see content switch between new and legacy versions

← Toggle to see different headers

Header Component:

🚀 Modern Header

HomeProductsDashboardProfile

New design with enhanced features!

Fallback Patterns

Creating robust fallback experiences

FlagsOff excels at creating fallback patterns that ensure users always have a functional experience:

Payment Flow Fallback

function CheckoutPage() {
  return (
    <div>
      <h1>Checkout</h1>
      
      {/* New payment flow */}
      <FlagsOn authorizedFlags="newPaymentFlow">
        <EnhancedPaymentForm 
          features={['savedCards', 'oneClick', 'digitalWallets']}
        />
      </FlagsOn>
      
      {/* Fallback to proven payment flow */}
      <FlagsOff authorizedFlags="newPaymentFlow">
        <LegacyPaymentForm 
          reliable={true}
          tested={true}
        />
      </FlagsOff>
    </div>
  );
}

Feature Rollback Demo

See how FlagsOff provides safety nets for critical functionality

Search Interface:

🔍 Advanced Search

FiltersSortAdvanced

Notification System:

🔔 Real-time Notifications

New message received

System update available

Multiple Flags

Working with multiple flags for complex fallback logic

Just like FlagsOn, FlagsOff supports multiple flags with AND/OR logic for sophisticated fallback scenarios:

Multiple Flags Example

// Show fallback when ANY flag is disabled (OR logic)
<FlagsOff 
  authorizedFlags={['premiumFeatures', 'betaAccess']} 
  exactFlags={false}
>
  <BasicFeatureSet />
</FlagsOff>

// Show fallback only when ALL flags are disabled (AND logic)
<FlagsOff 
  authorizedFlags={['premiumFeatures', 'betaAccess']} 
  exactFlags={true}
>
  <MinimalFeatureSet />
</FlagsOff>

Complex Fallback Logic

Experiment with different combinations of disabled flags

OR Logic: Show when ANY flag is disabled (exactFlags=false)

⚠️ Limited Access: Some features are disabled. Consider upgrading!

AND Logic: Show only when ALL flags are disabled (exactFlags=true)

🔒 Basic Plan: All advanced features are disabled. Upgrade to unlock more!

Common Use Cases

Real-world scenarios where FlagsOff shines

🔄 Migration Scenarios

• Gradual API migration

• UI component transitions

• Database schema changes

• Third-party service switches

<FlagsOff authorizedFlags="newAPIEndpoint">
  <LegacyDataFetcher />
</FlagsOff>

🛡️ Safety Nets

• Critical payment flows

• User authentication

• Data validation

• Error handling

<FlagsOff authorizedFlags="experimentalAuth">
  <ProvenAuthSystem />
</FlagsOff>

📱 Device Compatibility

• Mobile vs desktop features

• Browser capability checks

• Performance optimizations

• Accessibility alternatives

<FlagsOff authorizedFlags="advancedGraphics">
  <SimplifiedInterface />
</FlagsOff>

🎯 A/B Testing

• Control group experiences

• Baseline measurements

• Performance comparisons

• User preference studies

<FlagsOff authorizedFlags="variantB">
  <ControlGroupExperience />
</FlagsOff>

Best Practice

Always pair FlagsOff with FlagsOn to ensure complete coverage. This guarantees users see appropriate content regardless of flag states.

API Reference

Complete reference for the FlagsOff component

Props

Prop	Type	Required	Description
authorizedFlags	string \| string[]	Yes	Flag name(s) to check for disabled state
exactFlags	boolean	No	When true, ALL flags must be disabled. When false, ANY flag being disabled triggers render. Default: true
children	ReactNode	Yes	Content to render when conditions are met

Next: Admin Panel

You've learned about all the conditional rendering components. Now explore the admin panel for managing flags in real-time!

Admin Panel Demo →← Back to FlagsOn