Flag-poles NPM

The problem

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.

This solution

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.

Installation

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.

Usage

Try it out in the browser

import * as React from "react";
import { render } from "react-dom";
import { FlagProvider, FlagGuard, FlagSwitch } from "flag-poles";

const options = {
  flagMap: {
    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")
);

Render Function

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 = {
  flagMap: {
    flag1: { enabled: true },
  },
  // This function will apply to all flags.
  checkFlag: (flag, flagMap) => flagMap[flag].enabled && customLogicFunction(),
};