Feature Flags

Feature Flags display or hide content in the UI.

import { FeatureFlags, FeatureFlag } from '@cerberus/react'

Usage

This is a visible feature

'use client'

import { FeatureFlags, FeatureFlag } from '@cerberus/react'
import { useMemo } from 'react'

function FeatureFlagsPreview() {
  const flags = useMemo(
    () => ({
      featureOne: true,
      featureTwo: false,
    }),
    [],
  )

  return (
    <FeatureFlags flags={flags}>
      <FeatureFlag flag="featureOne">This is a visible feature</FeatureFlag>
      <FeatureFlag flag="featureTwo">This is a hidden feature</FeatureFlag>
    </FeatureFlags>
  )
}

API

export interface FeatureFlagsProviderValue {
  flags: Record<string, boolean>
}

export interface FeatureFlagProps {
  // A unique key of the flags data passed into the provider.
  flag: string
}

define function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): JSX.Element

Props

The FeatureFlag component accepts the following props:

Name	Default	Description
flag	null	A unique key of the flags data passed into the provider.

On this page

Edit this page on Github