feature-toggle-jsx
Version:
Toggle component on/off based on feature configuration
129 lines (95 loc) • 3.35 kB
Markdown
[](https://www.npmjs.com/package/feature-toggle-jsx)
[](https://bundlephobia.com/result?p=feature-toggle-jsx)
[](https://travis-ci.org/agoda-com/react-handyman)
[](https://codecov.io/gh/agoda-com/react-handyman)
[](https://dependabot.com/)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
Simple feature toggle for your React component
```bash
yarn add feature-toggle-jsx
npm install feature-toggle-jsx --save
```
```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,
},
}
...
<App>
<FeaturesProvider features={features}>
<ChatComponent />
...
<ImagePreviewComponent otherProps={...}>
</FeaturesProvider>
</App>
```
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,
},
}
```
```jsx
<FeaturesProvider features={features}>
<App />
</FeaturesProvider>
```
```jsx
export default withFeaturesProvider(App, features)
```
## Consuming feature flags
### `useFeature(name: string, (feature) => boolean)` React hook
```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)
```