react-feature-toggles

    3.0.3 • Public • Published

    react-feature-toggles

    Declarative feature toggle framework for react / react-native, allowing you to get rid of test complications, and branching logic.

    Build Status

    npm version

    Install

    npm install --save react-feature-toggles

    Usage

    Wrap your app in the FeatureToggleProvider and pass in a list of toggles, then use the FeatureToggle component throughout your application.

    Both FeatureToggleProvider and FeatureToggle must have only one child, this is so that the library isn't rendering additional elements on your behalf and making assumptions about your needs e.g you may want an <li> rather than a <div>.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { FeatureToggleProvider, FeatureToggle } from '../lib/index';
     
    const toggleNames = {
      SHOW_HELLO_WORLD: 'showHelloWorld'
      // ... add more here
    };
     
    const toggles = {
      // Try setting this to true
      [toggleNames.SHOW_HELLO_WORLD]: false
      // ... add more here
    };
     
    const ExampleComponent = () => (
      <FeatureToggleProvider featureToggleList={toggles}>
        <div>
          <h1>Toggling Example</h1>
          <FeatureToggle featureName={toggleNames.SHOW_HELLO_WORLD}>
            <p>Hello World</p>
          </FeatureToggle>
          <FeatureToggle featureName={toggleNames.SHOW_HELLO_WORLD} showOnlyWhenDisabled>
            <p>Sorry, toggle is off</p>
          </FeatureToggle>
        </div>
      </FeatureToggleProvider>
    );
     
    ReactDOM.render(<ExampleComponent />, document.getElementById('example'));

    Redux

    To use with redux you may want to do something like:

    const mapStateToProps = state => ({
      featureToggleList: state.features,
    });
    
    const ConnectedFeatureToggleProvider = connect(mapStateToProps)(FeatureToggleProvider);
    

    And then use the connected provider in place of the normal provider.

    Building the example

    • Clone this repo
    • Run npm install
    • Run npm run build-example
    • Open example/example.html in the browser
    • Play around with the toggle values

    Making a pull request?

    • Make sure you've run npm run ci-build first

    Changes

    • Version 3.0.3 Update dev dependencies
    • Version 3.0.2 Update readme
    • Version 3.0.1 Remove self dependency (:/)
    • Version 3.0.0 Upgrade peer deps (and internal deps) for React 16
    • Version 2.0.3 Switch proptypes from React.PropTypes to the dedicated proptypes library
    • Version 2.0.2 Ensures an undefined toggle is treated a false
    • Version 2.0.1 Removes a containing div around the provider children, should you need this div, please add it in yourself.

    Install

    npm i react-feature-toggles

    DownloadsWeekly Downloads

    2,001

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • albertoforni
    • rosytucker