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.

Table of Contents

• Installation
• Usage
• Contributors
• LICENSE

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(),
};

Contributors

Thanks goes to these people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT