Build fast and simple feature flags to integrate seamlessly into your react components
react-00d8ff.svg?style=flat-square){kind=icon}
You need feature flags, to show or hide certain parts of your application and you want it to be easy. You also don' want to pay a lot of money for this.
The library offers a couple of solutions. The first solution, is a flag "guard" which you can use to wrap your component passing a simple identifier attribute.
The second solution is a compound component which offers on/off branches in case you want to show custom content if the feature flag is disabled.
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies:
npm install --save flag-poles
# or with yarn
yarn add flag-poles
This package also depends on
react. Please make sure you have it installed as well.
import * as React from "react";
import { render } from "react-dom";
import { FlagProvider, FlagGuard, FlagSwitch } from "flag-poles";
const options = {
flags: {
my_flag: { enabled: false },
my_flag_switch: { enabled: true },
},
};
render(
<FlagProvider value={options}>
<div>You can see mee</div>
<FlagGuard flag="my_flag">
<div>I shall not be rendered</div>
</FlagGuard>
<FlagSwitch flag="my_flag_switch">
<FlagSwitch.On>
<div> Im a on switch</div>
</FlagSwitch.On>
<FlagSwitch.Off>
<div> This will render if flag is off</div>
</FlagSwitch.Off>
</FlagSwitch>
<div>You should see me too</div>
</FlagProvider>,
document.getElementById("root")
);So the case might be you're not just expecting to render flags only based on enabled:true/false but probably need a slightly more complex logic. To accomplish this you can override default checkFlag function by:
import * as React from "react";
import { render } from "react-dom";
import { FlagProvider, FlagGuard, FlagSwitch } from "flag-poles";
const customLogicFunction = () => true;
const options = {
flags: {
flag1: { enabled: true },
},
// This function will apply to all flags.
checkFlag: (flag, flags) => flags[flag].enabled && customLogicFunction(),
};Thanks goes to these people (emoji key):
 Tomas Caraccia 💻 📖 🚇 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent