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.

• Explicit Configuration: Only specified features are togglable, reducing the risk of accidental feature exposure across environments.

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

Setup

The utility checks the values of environment variables prefixed with FF_ for feature flags. You define which features are togglable by listing them explicitly, and these are passed into the context used across the application.

Populating Feature Flags in Server Components

To use feature flags effectively, you can fetch the required feature flags and pass them to the SSK RootLayout. This allows you to dynamically control features across your application without hardcoding values.

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

// Fetch the feature flags you want to manage
const featureFlags = getFeatureFlags([
  'GA_ANALYTICS',
  'STRIPE',
  'REWARDFUL',
  'LEMON',
  'LEMON_SQUEEZY_AFFILIATES',
  'VERCEL_SPEED_INSIGHTS',
])

// Pass the feature flags to the SSK RootLayout
export default function RootLayout({ children }) {
  return <SSKRootLayout featureFlags={featureFlags}>{children}</SSKRootLayout>
}

Server-Side Feature Flag Checks

For server-side logic, use checkIsFeatureFlagEnabled() to read environment variables directly. This ensures feature toggling is consistent even in API routes or server components.

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

function someServerFunction() {
  if (checkIsFeatureFlagEnabled('FEATURE_ONE')) {
    // Perform server-side logic for enabled feature
    console.log('Feature One 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 (!isFeatureOneEnabled) {
    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

getFeatureFlags(requiredFeatures: string[])

• Description: Fetches environment variables prefixed with FF_ for the specified features.

• Usage: Used to retrieve and pass feature flags to the FeatureFlagProvider.

• Example:

  const featureFlags = getFeatureFlags(['FEATURE_ONE', 'FEATURE_TWO'])

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!