react-awesome-feature-toggles

This plugin provides a feature toggle component

Features

• Set feature config and check if a toggle is enabled
• Use FeatureToggle Component to render children if a toggle is enabled
• Use FeatureToggle Component to render sub-routes if a toggle is enabled

Getting Started

Install react-awesome-feature-toggles using npm:

npm install --save react-awesome-feature-toggles

Usage

Setting your feature config:

Use setFeatureConfig to set you config. It accepts an object with keys which will be used as the names of your features. It currently does not (yet) support nested objects

  import { setFeatureConfig } from 'react-awesome-feature-toggles'

  setFeatureConfig({
    "awesome.feature": true,
    "disabled.feature": false
  })

Using the FeatureToggle Component

Now use the <FeatureToggle /> Component to conditionally render children

  import { FeatureToggle } from 'react-awesome-feature-toggles'

  return (
    <div>
      <FeatureToggle name="awesome.feature">
        This text is rendered
      </FeatureToggle>
      <FeatureToggle name="disabled.feature">
        This text is not rendered
      </FeatureToggle>
    </div>
  )

You can also use <FeatureToggle /> to enable routes conditionally. The disabled routes are taken from the route structure just like as if they do not exist:

  import { Route, IndexRoute, match } from 'react-router'
  import { FeatureToggle } from 'react-awesome-feature-toggles'

  const routes = (
    <Route name="home" path="/">
      <IndexRoute />
      <FeatureToggle name="awesome.feature">
        <Route name="route1" path="route1" />
      </FeatureToggle>
      <FeatureToggle name="disabled.feature">
        <Route name="route2" path="route2" />
      </FeatureToggle>
    </Route>)

This would lead to a router that matches /route1 but not /route2.

License

MIT