Reactor feature toggle
Your module to handle with feature toggles in ReactJS applications easier.
Why Feature toggle?
This is a common concept, but why use this directive instead solve it via server-side rendering?
The idea of this directive is make this process transparent and easier. So the main point is integrate this directive with other tooling process, such as:
- Server-side rendering;
- Progressive rendering;
- Any other that yoy like :)
You can integrate with WebSockets or handling this in a EventSourcing architecture. It's totally transparent for you and you can integrate easier in your application.
Install
You can get it on NPM installing reactor-feature-toggle module as a project dependency.
npm install reactor-feature-toggle --save# or yarn add reactor-feature-toggleYou can also use the standalone UMD build by including dist/reactor-feature-toggle.js in your page. If you do this you'll also need to include the dependencies. For example:
Setup
You'll need to import FeatureToggleProvider and add it into the root component of your application. So that you can enable/disable features via FeatureToggle component any place in your application.
Also, multiple FeatureToggleProvider are allowed, which gives more flexibility for your application.
;; const AppWrapper = { const featureToggleData = enableMainContent: true enableDescriptionContent: true enableSecondContent: false ; return <FeatureToggleProvider featureToggleService=featureToggleData> <div> <FeatureToggle featureName='enableMainContent'> <div className="content"> <p>This content is enabled</p> <FeatureToggle featureName='enableSecondContent'> <p>This content is disabled</p> </FeatureToggle> <FeatureToggle featureName='!enableSecondContent'> <p> This content is disabled but should be displayed since it has `!` prefix at `featureName` </p> </FeatureToggle> </div> </FeatureToggle> <FeatureToggle featureName='enableMainContent' 'enableDescriptionContent' > <div className="content"> <p> This content is enabled since `enableMainContent` and `enableDescriptionContent` are both truthly </p> </div> </FeatureToggle> <FeatureToggle featureName='enableMainContent' '!enableDescriptionContent' > <div className="content"> <p> This content is disabled because `enableMainContent` is truthly and `enableSecondContent` is falsy when using `!` prefix on array of configuration passed via props </p> <p> This can be used as a fallback if both feature toggles are not enabled as an example </p> </div> </FeatureToggle> </div> </FeatureToggleProvider> ;}; ;Demo
Try out the demo!
Publish
this project is using np package to publish, which makes things straightforward. EX: np <patch|minor|major>
For more details, please check np package on npmjs.com
Author
Wilson Mendes (willmendesneto)