React Feature Flagz

A lightweight React feature flags library for flag resolution with zero dependencies and full TypeScript support.

Installation

npm install react-feature-flagz
# or
yarn add react-feature-flagz

Quick Start

1. Setup Provider

import React, { useState } from "react"
import { FeatureFlagsProvider } from "react-feature-flagz"

function App() {
  const [flags, setFlags] = useState({
    "new-feature": true,
    "beta-feature": false,
    theme: "dark",
    "max-items": 25,
  })

  return (
    <FeatureFlagsProvider flags={flags}>
      <YourApp />
    </FeatureFlagsProvider>
  )
}

2. Use Feature Flags

import {
  useFeatureFlag,
  useFeatureValue,
  useMultipleFeatureFlags,
  Feature,
} from "react-feature-flagz"

function MyComponent() {
  // Boolean flag
  const isNewFeatureEnabled = useFeatureFlag("new-feature", false)

  // String value
  const theme = useFeatureValue<string>("theme", "light")

  // Number value
  const maxItems = useFeatureValue<number>("max-items", 10)

  // Multiple flags
  const flags = useMultipleFeatureFlags(["feature-1", "feature-2"], false)

  return (
    <div>
      {isNewFeatureEnabled && <div>New feature is enabled!</div>}
      <div className={`theme-${theme}`}>Current theme: {theme}</div>
      <div>Max items: {maxItems}</div>

      {/* Using multiple flags */}
      {flags["feature-1"] && <div>Feature 1 is enabled!</div>}
      {flags["feature-2"] && <div>Feature 2 is enabled!</div>}

      {/* Using Feature component */}
      <Feature
        flag="beta-feature"
        fallback={<div>Beta feature not available</div>}
      >
        <div>Beta feature is available!</div>
      </Feature>
    </div>
  )
}

API Reference

Hooks

• useFeatureFlag(flagName, fallback?) - Returns boolean for feature enabled state
• useFeatureValue<T>(flagName, fallback?) - Returns typed feature flag value
• useMultipleFeatureFlags(flagNames, fallback?) - Returns object with multiple boolean flags

Components

• <Feature> - Conditionally renders children based on flag
• withFeatureFlag(flag, fallbackValue?) - HOC for wrapping components

Data Management

You control where flags come from. Example with API:

const [flags, setFlags] = useState({})

useEffect(() => {
  fetch("/api/feature-flags")
    .then((res) => res.json())
    .then(setFlags)
}, [])

TypeScript Support

Full type safety with built-in types:

import { FeatureFlagValue, FeatureFlagsResponse } from "react-feature-flagz"

const flags: FeatureFlagsResponse = {
  "new-feature": true,
  theme: "dark",
  "max-items": 25,
}

Testing

import { render, screen } from "@testing-library/react"
import { FeatureFlagsProvider } from "react-feature-flagz"

test("renders feature when enabled", () => {
  const flags = { "test-feature": true }

  render(
    <FeatureFlagsProvider flags={flags}>
      <Feature flag="test-feature">
        <div>Feature enabled</div>
      </Feature>
    </FeatureFlagsProvider>
  )

  expect(screen.getByText("Feature enabled")).toBeInTheDocument()
})

License

MIT