feature-toggle-jsx
v4.0.0
Published
Toggle component on/off based on feature configuration
Downloads
4,073
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", _ => _.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)