https://github.com/ohmyjersh/flazzle
a simplified implementation of feature flags (flippers) with dashboard for react + redux
https://github.com/ohmyjersh/flazzle
dashboard feature-flag feature-flags feature-toggle feature-toggles react redux
Last synced: 10 months ago
JSON representation
a simplified implementation of feature flags (flippers) with dashboard for react + redux
- Host: GitHub
- URL: https://github.com/ohmyjersh/flazzle
- Owner: ohmyjersh
- License: mit
- Created: 2018-01-27T02:58:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-17T14:05:59.000Z (almost 8 years ago)
- Last Synced: 2024-12-01T08:45:38.546Z (over 1 year ago)
- Topics: dashboard, feature-flag, feature-flags, feature-toggle, feature-toggles, react, redux
- Language: JavaScript
- Homepage: https://ohmyjersh.github.io/flazzle/
- Size: 605 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Flazzle 1.1.0
## Demo
[Flazzle Demo](https://ohmyjersh.github.io/flazzle/)
[](https://travis-ci.org/ohmyjersh/flazzle)
>Minimalistic feature flag (flipper) library for React + Redux with a sweet dashboard
## Install
```sh
# Using Yarn:
yarn add flazzle
# Or, using NPM:
npm install flazzle --save
```
## Use
### 1. Create feature flag object
```js
export default {
featureThing:true
}
```
*This could be a flat file or generated via an api call*
### 2. Create a store with flags reduxer
```jsx
import {createStore, combineReducers} from 'redux';
import flags from './[FLAG_LOCATION]'
let store = createStore(combineReducers({app:[ADD_ROOT_REDUCER]], flags:flazzleReducer(flags)}));
```
*This is just an example, just make sure to include flazzleReducer*
### 3. Add to the dashboard any component/container with access to the store
```jsx
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { flazzleActions, FlazzleDashboard } from 'flazzle';
import 'flazzle/dist/css/index.css';
export default props => (
...
[PROP_TO_CLOSE_DASHBOARD]} />
...
);
function mapStateToProps(state) {
return { state: state.app, flags: state.flags }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(flazzleActions, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
```
*Please checkout the demo project within the src folder to see how this is implemented.*
*When using the dashboard, import css styles from flazzle/build/css/index.css*
### 3. Add to components to hide/show features
```jsx
import React from 'react';
import {Flag} from 'flazzle';
export default ({flags}) => {
return (
asdfadf experimental} stable={() => stable} />
asdf experimental} />
)
}
```
**That's all there is to it, start flipping.**
## Local Development
Install dependencies:
```
npm install
```
Build Library:
```
npm run build
```
Run Demo:
```
npm run demo
```
## Contributions:
Features, bug fixes and other changes to flazzle are gladly accepted. Please open issues or a pull request with your change.
Thank you for contributing!