Package Exports

feature-toggle-jsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (feature-toggle-jsx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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")

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

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

...

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

...

<App>
  <FeatureProvider features={features}>
    <ChatComponent />
    ...
    <ImagePreviewComponent otherProps={...}>
  </FeatureProvider>
</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, or empty object if there is no extra configuration.

Extra configurations will be passed to component and can be used directly via props.

Feature flag configuration shape is:

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

`<FeaturesProvider />` component

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

`withFeaturesProvider()` HOC

export default withFeaturesProvider(App, features)

Consuming feature flags

`useFeature(names: string[])` React hook

const [feature] = useFeatures('chat')

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

If the configuration contains extra configuration:

const [feature] = useFeatures('preview')

// feature -> { perPage: 3 }

`withFeature(c: Component, name: string)` HOC

export default withFeature(ChatComponent, 'chat')