feature-toggle-jsx

Simple feature toggle for your React component

yarn add feature-toggle-jsx

# or with npm

npm install feature-toggle-jsx --save

Example

// ChatComponent
import { withFeature } from "feature-toggle-jsx"
const ChatComponent = _ => {...}

export default withFeature(ChatComponent, "chat")

// ImagePreview
import { withFeature } from "feature-toggle-jsx"
const ImagePreviewComponent = ({ props, perPage }) => {...}

export default withFeature(ImagePreviewComponent, "preview", _ => _.perPage == 2) // will only render if feature perPage value meets the selector criteria.

// App
import { FeaturesProvider } from "feature-toggle-jsx"

import ChatComponent from "./ChatComponent"
import ImagePreviewComponent from "./ImagePreviewComponent"

...

const features = {
  chat: {
    isEnabled: true,
  },
  preview: {
    isEnabled: true,
    perPage: 3,
  },
}

...

<App>
  <FeaturesProvider features={features}>
    <ChatComponent />
    ...
    <ImagePreviewComponent otherProps={...}>
  </FeaturesProvider>
</App>

Setup feature flags and configuration provider

Feature flag object (aka. the feature configurations)

Feature configuration is a map of feature name and its configurations, with required isEnabled flag as part of config. If feature is null or undefined, it will be evaluated as disabled.

Extra configurations can be used inside of component via useFeature hook or can be used to select different field than isEnabled to evaluate feature visibility.

Feature flag configuration shape is:

{
  featureName: {
    isEnabled: true,
    opt1: "1",
    opt2: 2,
    opt3: [3, 4, 5],
  },
  chat: {
    isEnabled: false,
  },
  preview: {
    isEnabled: true,
    perPage: 3,
  },
}

<FeaturesProvider /> component

<FeaturesProvider features={features}>
  <App />
</FeaturesProvider>

withFeaturesProvider() HOC

export default withFeaturesProvider(App, features)

Consuming feature flags

useFeature(name: string, (feature) => boolean) React hook

const [isEnabled, config] = useFeature('chat')

if (feature) {
  // do something, render Chat component
} else {
  // "chat" feature is not enabled
}

// or if we wanna use diferent field for selecting enabled value:
const [isEnabled, config] = useFeature('chat', _ => _.someConfigField == 0)