Simple React component for feature flags
Last updated 3 years ago by chadtmiller .
MIT · Original npm · Tarball · package.json
$ cnpm install @crystal-ball/feature-flag 
SYNC missed versions from official npm registry.


feature-flag is a feature flag component for React.

A <FeatureFlag> component will render any child components if the passed path property is enabled in a feature flag object passed to the setupFlags function. The feature flag object could be stored in an object in a separate javascript file, a json file, or returned from an api request.


$ npm install --save @crystal-ball/feature-flag
$ yarn add @crystal-ball/feature-flag


Render a <FeatureFlag> component with a path property. The passed path should match a property in the feature flags object passed to setupFlags before the app starts up. If the path exists and it's truthy, the component's children will render.

setupFlags takes an optional first argument to change the name of the key used to store the feature flags as json in localStorage. By default, the key is crystal-ball/feature-flags.

import React, { Component } from 'react';
import { setupFlags, FeatureFlag } from '@crystal-ball/feature-flag';

  someFeature: true

class App extends Component {
  render() {
    return (
        <FeatureFlag path="someFeature">
          <div>Your cool feature</div>

In the developer console you can enable any of the features you've defined by executing window.enableFeature('someFeature') and refresh the page. Since all of the flags are stored in localStorage, clear your cache or your localStorage to reset the app back to the original feature flag configuration passed to setupFlags.

Current Tags

  • 1.0.1                                ...           latest (3 years ago)

2 Versions

  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (11)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |