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:
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
https://rawgit.com/NShahri/React.ReleaseToggle/master/lib/js/demo.html
import Toggle from 'react.rt';
or
import {ToggleReleaseApp, ToggleRelease, withReleaseToggleContext, CurrentTogglesView} from 'react.rt';
var Toggle = require('react.rt');
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>
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)
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>
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 />
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.
<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>
<ReleaseToggleApp features={{feature1:true, feature2:false, feature3:true}}>
</ReleaseToggleApp>
<ReleaseToggleApp features={['feature1', 'feature3']} feature2={false}>
</ReleaseToggleApp>
- Documentation (in progress)
- More unit tests (in progress)
- Using build server
- Fixing bower package
- Publishing es6 and umd of each modules which can be used in any other application build process
- Using cookies to get list of features
- Using query string for list of features
- Implementing versioning for features, ie: feature1: '~1.0.2'
- Supporting different engine for checking features
- Server side supporting
Use GitHub issues for requests.
I actively welcome pull requests. I expect project participants to adhere to Code of Conduct.
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.
MIT. Copyright (c) 2016.