Feature Flags

This utility provides a flexible and powerful way to manage feature toggling in your SSK-Pro project. By leveraging environment-driven feature flags, you can enable or disable features without modifying the codebase, making it easy to adapt to different environments, perform A/B testing, or selectively roll out features.

Why This Approach is Valuable

• Dynamic Control: Features can be turned on or off based on environment variables, allowing for rapid adjustments without code changes.

• Seamless Integration: Works with both server and client components, ensuring consistent feature management across your application.

• Automatic Detection: All environment variables prefixed with FF_ are automatically detected as feature flags.

• Scalability: Easily extend or modify feature rules based on roles, percentages, or other criteria using simple configuration.

Setup

The utility automatically checks for environment variables prefixed with FF_ and makes them available as feature flags throughout your application. Simply add or modify these variables in your .env file to control features.

Environment Variable Configuration

To add a new feature flag, simply add an environment variable with the FF_ prefix:

# .env file
FF_MY_FEATURE="true"  # Enable a feature
FF_ANOTHER_FEATURE="false"  # Disable a feature

The feature flags are automatically detected and available in both server and client components without any additional setup.

Server-Side Feature Flag Checks

For server-side logic, use checkIsFeatureFlagEnabled() to read environment variables directly:

import { checkIsFeatureFlagEnabled } from '@core/feature-flags/utils'

function someServerFunction() {
  if (checkIsFeatureFlagEnabled('MY_FEATURE')) {
    // Perform server-side logic for enabled feature
    console.log('My Feature is enabled')
  }
}

Client-Side Feature Flag Checks

For client-side components, use the useCheckIsFeatureEnabled hook to access the feature flags from the context.

import React from 'react'
import { useCheckIsFeatureEnabled } from '@core/feature-flags/FeatureFlagProvider'

function MyComponent() {
  const checkIsFeatureEnabled = useCheckIsFeatureEnabled()

  const isFeatureOneEnabled = checkIsFeatureEnabled('FEATURE_ONE')

  if (!isFeatureEnabled) {
    return null
  }

  return (
    <div>
      <p>Feature One is enabled!</p>
    </div>
  )
}

Conditional Rendering with FeatureEnabled Component

The FeatureEnabled component can be used to conditionally render UI elements based on feature flags.

import FeatureEnabled from '@core/feature-flags/FeatureEnabled'

function ExampleComponent() {
  return (
    <div>
      <FeatureEnabled featureFlag="FEATURE_ONE">
        <p>This content is shown if FEATURE_ONE is enabled.</p>
      </FeatureEnabled>
      <FeatureEnabled featureFlag={['FEATURE_ONE', 'FEATURE_TWO']}>
        <p>
          This content is shown if either FEATURE_ONE or FEATURE_TWO are
          enabled.
        </p>
      </FeatureEnabled>
    </div>
  )
}

---

Core Functions

checkIsFeatureFlagEnabled(featureName: string)

• Description: Checks if a feature flag is enabled by reading from environment variables (used in server-side code).

• Returns: true if the feature is enabled, otherwise false.

useCheckIsFeatureEnabled()

• Description: A React hook for checking if a feature flag is enabled (used in client-side components).

• Returns: A function to check if a feature is enabled.

FeatureEnabled Component

• Props:

  • featureFlag (string | string[]): The feature flag(s) to check.

  • children (React.ReactNode): The elements to render if the feature flag is enabled.

• Description: Conditionally renders its children based on the specified feature flags.

---

Final Notes

This feature flagging approach ensures that only explicitly defined features are togglable, minimizing unintended behaviors across environments. It seamlessly integrates into server and client components, providing robust and dynamic control over your application's features.

For a detailed breakdown of feature flags, including advanced use cases like A/B testing, percentage-based rollouts, and user role-based features, visit Feature Flags at Zero Cost.

Happy toggling!