https://github.com/willmendesneto/reactor-feature-toggle
Feature toggle components integration for your ReactJS application
https://github.com/willmendesneto/reactor-feature-toggle
feature-flag feature-toggle flag hacktoberfest react reactjs reactor-feature-toggle toggle
Last synced: 5 months ago
JSON representation
Feature toggle components integration for your ReactJS application
- Host: GitHub
- URL: https://github.com/willmendesneto/reactor-feature-toggle
- Owner: willmendesneto
- License: mit
- Created: 2017-06-05T12:27:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-22T05:27:37.000Z (about 2 years ago)
- Last Synced: 2023-08-24T06:33:10.363Z (over 1 year ago)
- Topics: feature-flag, feature-toggle, flag, hacktoberfest, react, reactjs, reactor-feature-toggle, toggle
- Language: TypeScript
- Homepage:
- Size: 2.48 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Reactor feature toggle
[](https://greenkeeper.io/)
[](https://stackblitz.com/edit/reactor-feature-toggle-sample)
[](http://badge.fury.io/js/reactor-feature-toggle) [](https://npmjs.org/reactor-feature-toggle)
[](https://circleci.com/gh/willmendesneto/reactor-feature-toggle)
[](https://coveralls.io/r/willmendesneto/reactor-feature-toggle?branch=master)
[](https://david-dm.org/willmendesneto/reactor-feature-toggle)
[](https://npmjs.org/reactor-feature-toggle)
[](https://npmjs.org/reactor-feature-toggle)
Your module to handle with [feature toggles](http://martinfowler.com/bliki/FeatureToggle.html) 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](#install)
- [Setup](#setup)
- [Usage](#usage)
- [Releases](#releases)
- [Demo](#demo)
## Install
You can get it on NPM installing `reactor-feature-toggle` module as a project dependency.
```shell
npm install reactor-feature-toggle --save
# or
yarn add reactor-feature-toggle
```
You 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:
```html
```
## 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.
```javascript
import React, { Component } from 'react';
import { FeatureToggleProvider, FeatureToggle } from 'reactor-feature-toggle';
const AppWrapper = () => {
const featureToggleData = {
enableMainContent: true,
enableDescriptionContent: true,
enableSecondContent: false,
};
return (
This content is enabled
This content is disabled
This content is disabled, but should be displayed since it has
`!` prefix at `featureName`
This content is enabled since `enableMainContent` and
`enableDescriptionContent` are both truthly
This content is disabled because `enableMainContent` is truthly
and `enableSecondContent` is falsy when using `!` prefix on array
of configuration passed via props.
This can be used as a fallback if both feature toggles are not
enabled, as an example
);
};
export default AppWrapper;
```
# Demo
Try out the [demo](https://stackblitz.com/edit/reactor-feature-toggle-sample)!
## Publish
this project is using `np` package to publish, which makes things straightforward. EX: `np `
> For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)
## Author
**Wilson Mendes (willmendesneto)**
-
-