Feature Flags Made Simple

A powerful, type-safe React library for managing feature flags with encrypted storage and real-time synchronization

Get StartedTry Admin Panel

Table of Contents

What are Feature Flags?

Understanding the concept and benefits of feature flags in modern web development

Feature flags (also known as feature toggles) are a software development technique that allows you to turn features on or off without deploying new code. They provide a powerful way to:

🚀 Gradual Rollouts

Release features to a subset of users first, gradually increasing exposure as confidence grows.

🎯 A/B Testing

Test different versions of features with different user groups to optimize performance.

🔒 Risk Mitigation

Quickly disable problematic features without deploying new code or rolling back releases.

⚡ Instant Changes

Enable or disable features in real-time across all user sessions and browser tabs.

Real-world Example

Imagine you're launching a new checkout flow. Instead of deploying it to all users at once, you can use a feature flag to show it only to 10% of users initially, monitor metrics, and gradually increase the percentage as you gain confidence.

Library Overview

Meet @pursuit-amsterdam/feature-flags - a modern, type-safe solution

Our feature flags library is designed specifically for React applications, offering a clean API, full TypeScript support, and powerful features that make feature flag management a breeze.

Core Components

P

FlagsProvider

Context provider that manages flag state and synchronization

C

Conditional Components

Flags, FlagsOn, FlagsOff for declarative conditional rendering

A

Admin Panel

Ready-to-use UI for managing flags in development and testing

H

useFeatureFlags Hook

React hook for programmatic flag access and manipulation

Key Features

What makes this library special

🔒 Encrypted Storage

Flag states are encrypted before being stored in localStorage, ensuring sensitive configuration data remains secure.

⚡ Real-time Sync

Changes made in one browser tab are instantly reflected across all other tabs and windows.

📝 Full TypeScript Support

Complete type safety with auto-completion and compile-time error checking for all flag operations.

🎛️ Environment Integration

Seamlessly integrates with environment variables for different deployment stages.

Quick Demo

See the library in action with live examples

Interactive Demo

The examples below are fully interactive! Try toggling the flags to see how the content changes in real-time.

Flag Controls

Basic Conditional Rendering

✨ New Header Enabled: This content only appears when the 'useNewHeader' flag is turned on.

Code Example

Simple Usage
import { Flags, FlagsOff } from '@pursuit-amsterdam/feature-flags';

function MyComponent() {
  return (
    <div>
      <Flags authorizedFlags="newFeature">
        <NewFeatureComponent />
      </Flags>
      
      <FlagsOff authorizedFlags="newFeature">
        <LegacyComponent />
      </FlagsOff>
    </div>
  );
}

Getting Started

Ready to dive in? Here's how to begin