Feature Flags Components | Sylphx Documentation

FeatureGate

Conditionally render content based on feature flag state

FeatureVariant

Render different variants based on flag value

FeatureValue

Display raw flag value for debugging or dynamic content

FlagDevTools

Developer tools for debugging and overriding flags

Quick Start

All feature flag components are available from the SDK. Wrap your app with SylphxProvider for automatic flag context and caching.

Installation

import {
  FeatureGate,
  FeatureVariant,
  FeatureValue,
  FlagDevTools,
} from '@sylphx/platform-sdk/react'

FeatureGate

Conditionally render content based on whether a feature flag is enabled. The simplest way to gate features in your React app. Handles loading states automatically.

SSR Compatible

Auto-cached

Basic Usage

import { FeatureGate } from '@sylphx/platform-sdk/react'

export function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      <FeatureGate flag="new_analytics">
        <AnalyticsV2 />
      </FeatureGate>

      {/* With fallback for when flag is disabled */}
      <FeatureGate
        flag="new_sidebar"
        fallback={<LegacySidebar />}
      >
        <NewSidebar />
      </FeatureGate>
    </div>
  )
}

Props

Property	Type	Description
`flag`required	`string`	The feature flag key to check
`children`required	`ReactNode`	Content to render when flag is enabled
`fallback`	`ReactNode`	Content to render when flag is disabled
`loading`	`ReactNode`	Content to show while flag is loading
`userId`	`string`	User ID for targeting (auto-detected from context)
`context`	`Record<string, any>`	Additional context for targeting rules
`defaultValue`	`boolean`= false	Value to use before flag loads
`onEvaluation`	`(enabled: boolean) => void`	Callback when flag is evaluated

Advanced Examples

<FeatureGate
  flag="premium_features"
  loading={<FeatureSkeleton />}
  fallback={<UpgradePrompt />}
>
  <PremiumDashboard />
</FeatureGate>

Server-Side Rendering

FeatureGate works with SSR. Use defaultValue to control the initial render before flags are fetched client-side.

FeatureVariant

Render different content based on the value of a multi-variant feature flag. Perfect for A/B testing, experiments, and displaying different UI variations.

Multi-variant

A/B Testing

Basic Usage

import { FeatureVariant } from '@sylphx/platform-sdk/react'

export function PricingPage() {
  return (
    <FeatureVariant
      flag="pricing_experiment"
      variants={{
        control: <CurrentPricing />,
        variant_a: <SimplifiedPricing />,
        variant_b: <DetailedPricing />,
      }}
      defaultVariant="control"
    />
  )
}

Props

Property	Type	Description
`flag`required	`string`	The feature flag key to check
`variants`required	`Record<string, ReactNode>`	Map of variant keys to content
`defaultVariant`	`string`= first variant	Variant to show when flag value is not in variants map
`loading`	`ReactNode`	Content to show while flag is loading
`userId`	`string`	User ID for targeting (auto-detected from context)
`context`	`Record<string, any>`	Additional context for targeting rules
`onEvaluation`	`(variant: string) => void`	Callback when variant is determined

Advanced Examples

<FeatureVariant
  flag="checkout_experiment"
  variants={{
    control: <CheckoutV1 />,
    single_page: <SinglePageCheckout />,
    multi_step: <MultiStepCheckout />,
  }}
  onEvaluation={(variant) => {
    // Track which variant the user sees
    analytics.track('experiment_viewed', {
      experiment: 'checkout_experiment',
      variant,
    })
  }}
/>

Experiment Tracking

Always use onEvaluation to track which variant users see. This data is essential for analyzing A/B test results.

FeatureValue

Display or access the raw value of a feature flag. Useful for debugging, showing dynamic content, or passing flag values to other components.

Raw Values

JSON Support

Basic Usage

import { FeatureValue } from '@sylphx/platform-sdk/react'

export function Settings() {
  return (
    <div>
      {/* Display boolean flag */}
      <p>
        Dark mode: <FeatureValue flag="dark_mode" />
      </p>

      {/* Use render prop for custom display */}
      <FeatureValue flag="max_upload_size">
        {(value) => (
          <p>Max upload: {value}MB</p>
        )}
      </FeatureValue>
    </div>
  )
}

Props

Property	Type	Description
`flag`required	`string`	The feature flag key to retrieve
`children`	`(value: any) => ReactNode`	Render prop for custom rendering
`format`	`"raw" \| "boolean" \| "string" \| "json"`= "raw"	How to format the output
`fallback`	`ReactNode`	Content to show if flag is not found
`loading`	`ReactNode`	Content to show while loading
`userId`	`string`	User ID for targeting (auto-detected from context)
`context`	`Record<string, any>`	Additional context for targeting rules

Advanced Examples

<FeatureValue flag="api_config" format="json">
  {(config) => (
    <div className="p-4 bg-muted rounded-lg">
      <h4>Current Configuration</h4>
      <pre>{JSON.stringify(config, null, 2)}</pre>
    </div>
  )}
</FeatureValue>

FlagDevTools

Developer tools for debugging feature flags in development and staging environments. Override flags, view evaluation details, and test different scenarios without changing backend configuration.

Debugging

Dev Only

Basic Usage

import { FlagDevTools } from '@sylphx/platform-sdk/react'

export function App() {
  return (
    <>
      <MainContent />

      {/* Only renders in development */}
      <FlagDevTools />
    </>
  )
}

Props

Property	Type	Description
`enabled`	`boolean`= process.env.NODE_ENV === "development"	Force enable/disable dev tools
`position`	`"bottom-left" \| "bottom-right" \| "top-left" \| "top-right"`= "bottom-right"	Panel position on screen
`defaultOpen`	`boolean`= false	Start with panel open
`showInProduction`	`boolean`= false	Allow in production (requires admin)
`hotkey`	`string`= "ctrl+shift+f"	Keyboard shortcut to toggle panel
`persistOverrides`	`boolean`= true	Save overrides to localStorage
`onOverride`	`(flag: string, value: any) => void`	Callback when a flag is overridden
`theme`	`"light" \| "dark" \| "system"`= "system"	Dev tools panel theme

Features

Flag Overview

See all feature flags and their current values for the logged-in user

Override Values

Temporarily override any flag to test different scenarios

Evaluation Details

View why a flag resolved to a specific value (rules matched, percentage, etc.)

Persist Overrides

Save overrides to localStorage for consistent testing across page loads

Advanced Examples

<FlagDevTools
  position="bottom-left"
  defaultOpen={true}
  hotkey="ctrl+shift+d"
/>

Production Usage

FlagDevTools is disabled by default in production. If you enable it with showInProduction, ensure only authorized users (like admins) can access it.

Keyboard Shortcuts

Shortcut	Action
Ctrl+Shift+F	Toggle dev tools panel
Escape	Close panel
Ctrl+Shift+R	Reset all overrides
/	Focus search (when panel is open)

Related Hooks

For more control, use hooks instead of components:

Hooks API

import {
  useFeatureFlag,
  useFeatureFlags,
  useConfigFlag
} from '@sylphx/platform-sdk/react'

function MyComponent() {
  // Single boolean flag
  const { enabled, loading } = useFeatureFlag('new_feature')

  // Multiple flags at once
  const { flags, loading: flagsLoading } = useFeatureFlags([
    'feature_a',
    'feature_b',
    'feature_c',
  ])

  // JSON config flag
  const { config, loading: configLoading } = useConfigFlag('app_config')

  if (loading || flagsLoading || configLoading) {
    return <Skeleton />
  }

  return (
    <div>
      {enabled && <NewFeature />}
      {flags.feature_a && <FeatureA />}
      <Settings config={config} />
    </div>
  )
}

Best Practices

Provide Fallbacks

Always include fallback content for when flags are disabled or loading.

Track Evaluations

Use onEvaluation callbacks to track which variants users see for analytics.

Keep Dev Tools Secure

Never enable FlagDevTools in production for regular users.

Use Components for Simple Cases

Prefer declarative components over hooks for cleaner JSX.

Ready to ship features safely?

Learn more about feature flag strategies, targeting rules, and A/B testing.

Feature Flags Overview Analytics Integration

Feature Flags

Full flags documentation

Referrals

Build referral programs