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,
},
}
component <FeaturesProvider />
<FeaturesProvider features={features}>
<App />
</FeaturesProvider>
HOC withFeaturesProvider()
export default withFeaturesProvider(App, features)
Consuming feature flags
React hook useFeature(name: string, (feature) => boolean)
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)