Feature Flags

Jose Madrid Salsa includes GrowthBook as a feature flag dependency (@growthbook/growthbook-react). GrowthBook provides feature flagging and A/B testing capabilities.

Installation

GrowthBook React SDK is already installed:

package.json

{
  "dependencies": {
    "@growthbook/growthbook-react": "^1.6.5"
  }
}

Setup

To use GrowthBook, you need to configure the SDK with your GrowthBook client key. Wrap your application in the GrowthBook provider:

app/layout.tsx (example)

import { GrowthBookProvider } from '@growthbook/growthbook-react'
import { GrowthBook } from '@growthbook/growthbook-react'

const gb = new GrowthBook({
  apiHost: 'https://cdn.growthbook.io',
  clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
  enableDevMode: process.env.NODE_ENV === 'development',
})

export default function RootLayout({ children }) {
  return (
    <GrowthBookProvider growthbook={gb}>
      {children}
    </GrowthBookProvider>
  )
}

Usage

Check a Feature Flag

import { useFeatureIsOn } from '@growthbook/growthbook-react'

function MyComponent() {
  const showNewCheckout = useFeatureIsOn('new-checkout-flow')

  if (showNewCheckout) {
    return <NewCheckoutFlow />
  }
  return <LegacyCheckout />
}

Feature Value

import { useFeatureValue } from '@growthbook/growthbook-react'

function Banner() {
  const bannerText = useFeatureValue('banner-text', 'Welcome!')
  return <div>{bannerText}</div>
}

Environment Variables

Variable	Description
`NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY`	GrowthBook client key (public, safe for browser)

GrowthBook Dashboard

Configure feature flags and experiments in the GrowthBook dashboard:

Create a feature (e.g., new-checkout-flow)
Set targeting rules (percentage rollout, user attributes, etc.)
Toggle on/off without deploying code

GrowthBook is included as a dependency but may not be actively configured in all environments. The application functions normally without GrowthBook -- features default to their fallback values.

Database Feature Flags

In addition to GrowthBook, some features are controlled via database fields:

Model	Field	Purpose
`Fundraiser`	`enableSocialFeatures`	Toggle social features per fundraiser
`EmailConfiguration`	`isActive`	Enable/disable email configurations
`ServiceKey`	`isActive`	Enable/disable service integrations
`PartnerApiKey`	`isActive`	Enable/disable partner API access
`Product`	`isActive`	Show/hide products
`EmailTemplate`	`isActive`	Enable/disable email templates

How is this guide?

Feature Flags

On this page