@xtreamsrl/react-feature-flags

This package exposes a collections of hooks and utilities to manage feature flags.

Installation

npm install @xtreamsrl/react-feature-flags

Usage

In order to use the feature flag utilities, the package must be configured with a manger of your choice that implements FeatureFlagManager interface.

This can be done using one of the available managers (growthbook or launchdarkly) or by implementing a custom one.

Define the features you want to manage by augmenting the Features interface; Then assign the value of the flag (defined in the chosen manager platform) to the corresponding key within the FeaturesMap .

// features.d.ts
import { Features } from '@xtreamsrl/react-feature-flags';

declare module '@xtreamsrl/react-feature-flags' {

  interface Features {
    /*
    * Here you can list your app features.
    * This interface will define the keys of the features map.
    *
    * Logout: boolean;
    *
    */
  }
}

// featuresMap.ts
import { FeaturesMap } from "@xtreamsrl/react-feature-flags";

export const featuresMap: FeaturesMap = {
  /*
  * Here you can map your app features (defined in features.d.ts)
  * to the according flag keys (defined in the chosen manager platform)
  *
  * Logout: {
  *   flag: 'show-logout',
  * }
  *
  */
};

Client Side Usage

Set up the feature flag manager and the retrieval hook with configureManager and configureFeatureFlags. Be sure to wrap the main app with the FeatureFlagProvider.

// app.tsx
import { configureManager, configureFeatureFlags, FeatureFlagProvider } from '@xtreamsrl/react-feature-flags'
import { featuresMap } from '.shared/feature-flags'

configureFeatureFlags({
    useFeatureFlagValue: /* Add your hook for managing flags values here */,
});

configureManager({
manager: /* Add here an instance of a manager implementing FeatureFlagManager interface */
});

export function App() {
  return (
    <FeatureFlagProvider featuresMap={featuresMap}>
      <MainApp />
    </FeatureFlagProvider>
  );
}

Feature Flag Value

To retrieve the flag value use the useFlag hook or the FeatureWrapper,

useFlag

// Welcome.tsx
import React, { useCallback } from "react";
import { useFlag } from '@xtreamsrl/react-feature-flags';
import { FeatureFlag } from './shared/feature-flags';

export function Welcome() {  
  const allowSkipTutorial = useFlag(FeatureFlag.AllowSkipTutorial);

  const onClick = useCallback(() => {
    const url = allowSkipTutorial ? '/home' : '/tutorial';
    // ... redirect(url)
  }, [])
  
  return (
    <div>
      <h1>Welcome 👋</h1>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

FeatureWrapper

// Welcome.tsx
import React from "react";
import { FeatureWrapper } from '@xtreamsrl/react-feature-flags';
import { FeatureFlag } from './shared/feature-flags';

export function Welcome() {
  return (
    <div>
      <h1>Welcome 👋</h1>
      <FeatureWrapper feature={FeatureFlag.PROFILE}>
        <Profile />
      </FeatureWrapper>
    </div>
  );
}

Who we are

A proudly 🇮🇹 software development and data science startup.
We consider ourselves a family of talented and passionate people building their own products and powerful solutions for our clients. Get to know us more on xtreamers.io or follow us on LinkedIn.