Installation Guide

Get started with @pursuit-amsterdam/feature-flags in your React application

Table of Contents

Prerequisites

What you need before installing the library

Requirements

Make sure you have these installed before proceeding with the installation.

System Requirements

✓
Node.js16.0.0 or higher
✓
React17.0.0 or higher
✓
TypeScript4.0.0 or higher (optional but recommended)

Framework Compatibility

This library works with any React-based framework including Next.js, Create React App, Vite, and custom setups.

NPM Installation

Install using NPM package manager

If you're using NPM as your package manager, run the following command in your project directory:

Install with NPM
npm install @pursuit-amsterdam/feature-flags

Development Dependencies

The library includes TypeScript definitions, so no separate @types package is needed.

Yarn Installation

Install using Yarn package manager

If you prefer Yarn, use this command instead:

Install with Yarn
yarn add @pursuit-amsterdam/feature-flags

Yarn Workspaces

If you're using Yarn workspaces in a monorepo setup, you can install the package for a specific workspace:

yarn workspace your-app-name add @pursuit-amsterdam/feature-flags

PNPM Installation

Install using PNPM package manager

For PNPM users, the installation command is:

Install with PNPM
pnpm add @pursuit-amsterdam/feature-flags

PNPM Workspaces

In a PNPM workspace, you can install for a specific package:

pnpm add @pursuit-amsterdam/feature-flags --filter your-app-name

This Demo Uses PNPM

This demo application itself is built using PNPM in a monorepo setup, demonstrating real-world usage patterns.

Verify Installation

Make sure everything is working correctly

After installation, verify that the library is correctly installed by creating a simple test file:

test-installation.ts
import { 
  FlagsProvider, 
  useFeatureFlags, 
  Flags 
} from '@pursuit-amsterdam/feature-flags';

// If this imports without errors, installation was successful!
console.log('Feature flags library installed successfully!');

// Basic type check
const testConfig = {
  myFlag: true,
  anotherFlag: false,
} as const;

// This should compile without TypeScript errors
type TestFlags = typeof testConfig;

Check Package Version

You can verify the installed version using your package manager:

NPM
npm list @pursuit-amsterdam/feature-flags
Yarn
yarn list @pursuit-amsterdam/feature-flags
PNPM
pnpm list @pursuit-amsterdam/feature-flags

Build Errors?

If you encounter build errors, make sure your TypeScript configuration includes the node_modules/@pursuit-amsterdam/feature-flags directory or that your bundler is configured to handle TypeScript files from node_modules.

Next Steps

What to do after successful installation

Great! You've successfully installed the feature flags library. Now it's time to configure it in your application.

⚙️

Configuration Setup

Learn how to set up the FlagsProvider and configure your first feature flags.

Next: Configuration →
📚

Alternative: Browse Examples

If you prefer to see examples first, you can explore the component demos.

• Flags Component Examples• Admin Panel Demo

Quick Start Template

Want to jump straight into a working example? Copy this minimal setup:

Quick Start Example
import React from 'react';
import { FlagsProvider, Flags } from '@pursuit-amsterdam/feature-flags';

const flags = {
  newFeature: true,
  betaUI: false,
} as const;

function App() {
  return (
    <FlagsProvider config={flags}>
      <div>
        <h1>My App</h1>
        <Flags authorizedFlags="newFeature">
          <p>This is a new feature!</p>
        </Flags>
      </div>
    </FlagsProvider>
  );
}

export default App;