🔐 Implementing Feature Flags in React via Permix

#typescript #webdev #permissions #opensource

Feature flags are a powerful technique that allows developers to modify system behavior without changing code. They're particularly useful for A/B testing, gradual rollouts, or managing beta features. Today, I'll show you how to implement feature flags in a React application using Permix.

What is Permix?

Permix is a lightweight, type-safe library for managing permissions and feature flags in TypeScript applications. It provides a simple API and React hooks/components for checking permissions.

Installation

Use your favorite package manager to install Permix:

npm install permix

Implementation

Let's implement feature flags for a simple app with beta features.

1. Define Feature Flags

First, create a file to define your Permix instance with feature flags:

// lib/permix.ts
import { createPermix } from 'permix'
import { createComponents } from 'permix/react'

// Define permix instance with feature flags
export const permix = createPermix<{
  darkMode: {
    action: 'enabled'
  }
  betaFeatures: {
    action: 'newUI' | 'experimentalAPI'
  }
}>()

// Not necessary, but you can use components to check permissions
export const { Check } = createComponents(permix)

// Define feature flags
export const betaUserFeatures = permix.template({
  darkMode: {
    enabled: true,
  },
  betaFeatures: {
    newUI: true,
    experimentalAPI: true,
  },
})

export const regularUserFeatures = permix.template({
  darkMode: {
    enabled: true,
  },
  betaFeatures: {
    newUI: false,
    experimentalAPI: false,
  },
})

2. Setup Feature Flags

export async function setupFeatureFlags() {
  const user = await getUser()

  const featureConfig = user.isBetaUser
    ? betaUserFeatures()
    : regularUserFeatures()

  permix.setup(featureConfig)
}

3. Create a Custom Hook

For convenience, create a custom hook to use Permix:

import { usePermix } from 'permix/react'
import { permix } from '../lib/permix'

export function usePermissions() {
  return usePermix(permix)
}

4. Using Feature Flags

Here's how to use feature flags in your React components:

import { useEffect } from 'react'
import { usePermissions } from './hooks/use-permissions'
import { permix, Check, setupFeatureFlags } from './lib/permix'

export default function App() {
  const { check } = usePermissions()

  useEffect(() => {
    setupFeatureFlags()
  }, [])

  // Conditionally render based on feature flag
  if (!check('betaFeatures', 'newUI')) {
    return null
  }

  async function handleApiCall() {
    // Check feature flag before executing code
    if (!permix.check('betaFeatures', 'experimentalAPI')) {
      return
    }

    console.log('Calling experimental API...')
  }

  return (
    <div>
      <h1>New UI</h1>
      <Check entity="betaFeatures" action="experimentalAPI">
        <button type="button" onClick={handleApiCall}>
          Call experimental API
        </button>
      </Check>
    </div>
  )
}

Benefits of Using Permix

100% type-safe without writing TypeScript (except for initialization)
Single source of truth for your entire app
Perfect match for TypeScript monorepos
Zero dependencies
Useful methods for specific cases
Large number of integrations for different frameworks, such as React, Vue, Next.js, and more.

Summary

Permix provides a robust solution for implementing feature flags in React applications. Its type-safe approach and simple API make it an excellent choice for managing feature rollouts and user permissions.

The complete example code is available on GitHub, and you can find more information in the Permix documentation.