feature-toggle-jsx

Simple feature toggle for your React component

``bash
yarn add feature-toggle-jsx

or with npm

npm install feature-toggle-jsx --save
`

Example

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

export default withFeature(ChatComponent, "chat")

`

`jsx
// 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.
`

`jsx
// 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,
},
}

...




...



`

Setup feature flags and configuration provider

$3

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:

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

$3

`jsx



`

$3

`jsx
export default withFeaturesProvider(App, features)
`

Consuming feature flags

$3

`jsx
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)

``