Nonstop Progressive Marxism


    2.0.2 • Public • Published

    React Feature Flipper

    Build Status

    React Feature Flipper HOC.

    Feature Toggles (often also refered to as Feature Flags) are a powerful technique, allowing teams to modify system behavior without changing code.

    -- Martin Fowler

    If you don't know about feature flippers (feature toggles/flags) please read here from Martin Fowler and here from wikipedia.

    TL:DR; this technique allows you to activate/de-active your feature without changing code while your application is running. And this can be done on certain criteria and time. It can be applied to certain individuals (users) or you can use it for A/B testing.

    This library offers you a React HOC (high order component) to add your project.


    This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

    yarn add react-feature-flipper


    There are 2 HOCs:

    featureFlipper (or alternatively featureFlipperStatic with named import)

    This component is the default export of a library.

    • Import featureFlipper into your React project with default import.
    import featureFlipper from 'react-feature-flipper';

    Code below enables <HelloWorld /> component wherever used. Second item in array param enables/disables your component.

    export default featureFlipper([HelloWorld, true])


    • Import featureFlipperPromise into your React project.
    import { featureFlipperPromise } from 'react-feature-flipper';

    And use it as shown below.

    • Pass required parameters to featureFlipperPromise method call with an array items:
      • First (required): Your Component
      • Second (required): Promise to return all feature flippers. It should be an object with a property features having feature flippers (array of string).
      • Third (optional): The name of the feature flipper (string) you want to bind to a Component. If you omit this param then HOC uses the name of the component to find required feature flipper. eg. It would be HelloWorld for the example below.
    export default featureFlipper([
      new Promise(resolve => 
          features: ['hello_world', 'blabla']

    Usage with other HOCs

    You can pass wrapped component directly into featureFlipper. for example with redux connect

    export default featureFlipper([
      connect(mapStateToProps, mapDispatchToProps)(HelloWorld),

    I recommend you to create another file if you would like to enable feature flippers for multiple components. It would be easier to track down feature flipped components.

    import featureFlipper from 'react-feature-flipper';
    import { default as FooBase } from './Foo';
    import { default as BarBase } from './Bar';
    export const Foo = featureFlipper([FooBase, true]);
    export const Bar = featureFlipper([BarBase, false]);


    If you would like to see the example (example is located in examples/FeatureFlipper folder) running on your local machine then:

    git clone
    cd react-feature-flipper
    yarn dev

    browse http://localhost:9000

    Other commands:

    yarn build
    yarn test
    yarn lint




    npm i react-feature-flipper

    DownloadsWeekly Downloads






    Unpacked Size

    10.7 kB

    Total Files


    Last publish


    • erhangundogan