Nitrate Processed Mincemeat

    react.rt

    0.1.2 • Public • Published

    React.RT

    Feature Flag is a technique to turn some functionality of your application off, via configuration, without deploying new code. Feature flags play key part in CI scheme where features are constantly being deployed but not necessarily "released" into production.

    React.RT is a library which implements extendable feature flag as React component.

    For more information see the following links:

    Installation

    You can install React.RT with npm:

    npm install react.rt --save
    

    And it's just as easy with bower:

    bower install react.rt --save
    

    Live Demo

    https://rawgit.com/NShahri/React.ReleaseToggle/master/lib/js/demo.html

    Importing

    ES2015

    import Toggle from 'react.rt';

    or

    import {ToggleReleaseApp, ToggleRelease, withReleaseToggleContext, CurrentTogglesView} from 'react.rt';

    AMD

    var Toggle = require('react.rt');

    Basic Usage

    You can use ReleaseToggleApp to define enabled/disabled features for all children.

    You can use ReleaseToggle to check if features are matched to specified condition.

    <ReleaseToggleApp feature1={true} feature2={false} feature3={true}>
        <p> ReleaseToggleApp only define context of existing features for all children</p>
        <ReleaseToggle feature1={true} feature2={false} feature3={true}>
            <p>This message is visible when feature1 and feature3 are enabled and feature2 is disabled</p>
        </ReleaseToggle>
    </ReleaseToggleApp>

    Pass context as property to React component

    In order to more easily access the toggle context object, a withReleaseToggleContext component has been added. It is usable on any React Component of any type.

    This component uses React context internally and as long as React supports this.context in its current form, any code written for that API will continue to work. We think it is nicer and easier to use withReleaseToggleContext which hide the implementation details.

    import React from 'react';
    import { withReleaseToggleContext } from 'release-toggle';
     
    class MyView extends React.Component{
        let features = this.props.releaseToggleContext.features;
        let result = Object.keys(features).map(m=>m+'='+features[m]).join(',');
        render() {
            return (<div>{result}</div>);
        }
    }
     
    export default withReleaseToggleContext(MyView)

    nested contexts

    You can use ReleaseToggleApp nested in another ReleaseToggleApp. In the following sample nested ReleaseToggleApp will override feature2 and message should be visisble.

    <ReleaseToggleApp feature1={true} feature2={false} feature3={true}>
        <ReleaseToggleApp feature2={true}>
            <ReleaseToggle feature1={true} feature2={true} feature3={true}>
                <p>This message is visible when feature1, feature2 and feature3 are enabled</p>
            </ReleaseToggle>
        </ReleaseToggleApp>
    </ReleaseToggleApp>

    Display Context

    If you want to display context on your application you can use CurrentTogglesView.

    We do not recomment to use this component in your production release, but it can be useful for testing purposes.

    <CurrentTogglesView />

    API

    The ReleaseToggleApp and ReleaseToggle components take any number of arguments which can be a string or object. also property 'features' value will process as object of features.

    Arrays will be recursively flattened as per the rules above: The argument 'foo' is short for { foo: true }. If the value of the key is false, it won't be included in the output.

    Other ways of ReleaseToggle usage

    <ReleaseToggle features={{feature1:true, feature2:false, feature3:true}}>
            <p>This message is visible when feature1 and feature3 are enabled and feature2 is disabled</p>
    </ReleaseToggle>
     
    <ReleaseToggle features={['feature1', 'feature3']} feature2={false}>
            <p>This message is visible when feature1 and feature3 are enabled and feature2 is disabled</p>
    </ReleaseToggle>

    Other ways of using releaseToggleApp

    <ReleaseToggleApp features={{feature1:true, feature2:false, feature3:true}}>
    </ReleaseToggleApp>
     
    <ReleaseToggleApp features={['feature1', 'feature3']} feature2={false}>
    </ReleaseToggleApp>

    Future works

    1. Documentation (in progress)
    2. More unit tests (in progress)
    3. Using build server
    4. Fixing bower package
    5. Publishing es6 and umd of each modules which can be used in any other application build process
    6. Using cookies to get list of features
    7. Using query string for list of features
    8. Implementing versioning for features, ie: feature1: '~1.0.2'
    9. Supporting different engine for checking features
    10. Server side supporting

    Contributing

    Use GitHub issues for requests.

    I actively welcome pull requests. I expect project participants to adhere to Code of Conduct.

    Polyfills needed to support older browsers

    Array.isArray: see MDN for details about unsupported older browsers and a simple polyfill.

    Object.keys: see MDN for details about unsupported older browsers and a simple polyfill.

    Array.map: see MDN for details about unsupported older browsers and a simple polyfill.

    Object.assign: see MDN for details about unsupported older browsers and a simple polyfill.

    Array.find: see MDN for details about unsupported older browsers and a simple polyfill.

    License

    MIT. Copyright (c) 2016.

    Authors

    Install

    npm i react.rt

    DownloadsWeekly Downloads

    8

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • nima.rahmani