https://github.com/pliosoft/react-enable
feature flags to enable and disable functionality at runtime in a react application
https://github.com/pliosoft/react-enable
feature feature-flags flag react toggle
Last synced: 26 days ago
JSON representation
feature flags to enable and disable functionality at runtime in a react application
- Host: GitHub
- URL: https://github.com/pliosoft/react-enable
- Owner: pliosoft
- Created: 2020-02-24T22:24:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T16:38:16.000Z (over 1 year ago)
- Last Synced: 2025-05-02T16:03:54.194Z (about 1 month ago)
- Topics: feature, feature-flags, flag, react, toggle
- Language: TypeScript
- Size: 1.6 MB
- Stars: 9
- Watchers: 0
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Enable for feature flags
Easy and fast way to toggle features in your project.
Features include:
- Toggle parts of your project dynamically or at startup
- Built in state management for active features
- Roll your own state manager using the minimal functional interface
## Installation and usage
To install,
```sh
npm add --save react-enable react
```
Then most users will use it in the following manner:
```typescript
import React, { lazy } from 'react';
import { Features, ToggleFeatures, Disable, Enable, FeatureDescription } from 'react-enable';
const NewVersion = lazy(() => import('./src/new-version'));
const OldVersion = lazy(() => import('./src/old-version'));
// All available features should be declared up-front, with default values
const FEATURES: FeatureDescription[] = [{ name: 'v2', defaultValue: true }];
function RestOfApp(): JSX.Element {
return (
);
}
function App(): JSX.Element {
return (
);
}
```
## Documentation
### `Features` component
Provides state and context for managing a set of features.
Available props:
- `features: FeatureDescription[]`: description of available features.
- `disableConsole?: boolean`: indicate the console API
should not be enabled (default false)
- `storage?: Storage`: where to persist
overrides (default `window.sessionStorage`)
### `Enabled` and `Disabled` components
Render children depending on which set of features are active.
Props:
- `feature: string | string[]`: if one of these is enabled,
the children will render (or not, with Disabled)
- `allFeatures: string[]`: only if all the specified features are
enabled will it render children (or not, with Disabled)
### Hooks
- `useEnabled(features: string | string[])`: return true
if any specified features are enabled.
- `useAllEnabled(features: string | string[])`: return true
if all specified features are enabled.
- `useAllDisabled(features: string | string[])`: return true
if all specified features are disabled.
- `useDisabled(features: string | string[])`: return true
iff any specified features are disabled.
### `ToggleFeatures` component
Renders all current features specified in `Features`,
and whether they are enabled or disabled,
with checkboxes to toggle them.
Rendered HTML has class `toggle-features` for custom styling.
You might use this in a Portal,
and style it to float on top of the screen in developer builds.
### `EnableContext` component
This component can be used if you want to do your own state management
or custom feature storage.
Instead of using `Features`,
you would wrap your tree,
providing a custom test function.
```js
return (
myCustomFeatureEnabled(feature)}>
...
>
```
### `console` Interface
In addition to `ToggleFeatures`,
it is possible to toggle features on the console,
if configured.
To enable pass a boolean to `consoleOverride` prop
(you might want to feed this from an environment variable for
dev vs prod builds, for example):
```js
```
Then in the browser console,
you can use features:
```js
// toggle feature from enabled<->disabled, unset->enabled
window.feature.toggle('foo');
// force to enabled or disabled, respectively
window.feature.enable('foo');
window.feature.disable('foo');
// Unset the override, and hence let the default take over
window.feature.unset('foo');
// show all configured feature names and the current state of the feature
window.feature.listFeatures();
```
This can be useful for toggling features in production builds.