{"id":28089461,"url":"https://github.com/pliosoft/react-enable","last_synced_at":"2025-09-18T23:44:39.876Z","repository":{"id":42386453,"uuid":"242857021","full_name":"pliosoft/react-enable","owner":"pliosoft","description":"feature flags to enable and disable functionality at runtime in a react application","archived":false,"fork":false,"pushed_at":"2023-10-06T16:38:16.000Z","size":1682,"stargazers_count":9,"open_issues_count":3,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-02T16:03:54.194Z","etag":null,"topics":["feature","feature-flags","flag","react","toggle"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pliosoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-24T22:24:44.000Z","updated_at":"2025-02-12T08:12:18.000Z","dependencies_parsed_at":"2024-06-21T01:05:44.127Z","dependency_job_id":"57dbb920-559a-4899-a826-53f03e4dcdb4","html_url":"https://github.com/pliosoft/react-enable","commit_stats":{"total_commits":50,"total_committers":3,"mean_commits":"16.666666666666668","dds":"0.21999999999999997","last_synced_commit":"6ea668d03a9d80ec88c45161ba30b8b155d2893e"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pliosoft%2Freact-enable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pliosoft%2Freact-enable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pliosoft%2Freact-enable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pliosoft%2Freact-enable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pliosoft","download_url":"https://codeload.github.com/pliosoft/react-enable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948387,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feature","feature-flags","flag","react","toggle"],"created_at":"2025-05-13T12:58:27.900Z","updated_at":"2025-09-18T23:44:34.804Z","avatar_url":"https://github.com/pliosoft.png","language":"TypeScript","readme":"# React-Enable for feature flags\n\nEasy and fast way to toggle features in your project.\n\nFeatures include:\n\n- Toggle parts of your project dynamically or at startup\n- Built in state management for active features\n- Roll your own state manager using the minimal functional interface\n\n## Installation and usage\n\nTo install,\n\n```sh\nnpm add --save react-enable react\n```\n\nThen most users will use it in the following manner:\n\n```typescript\nimport React, { lazy } from 'react';\nimport { Features, ToggleFeatures, Disable, Enable, FeatureDescription } from 'react-enable';\n\nconst NewVersion = lazy(() =\u003e import('./src/new-version'));\nconst OldVersion = lazy(() =\u003e import('./src/old-version'));\n\n// All available features should be declared up-front, with default values\nconst FEATURES: FeatureDescription[] = [{ name: 'v2', defaultValue: true }];\n\nfunction RestOfApp(): JSX.Element {\n  return (\n    \u003cdiv\u003e\n      \u003cEnable feature=\"v2\"\u003e\n        \u003cNewVersion /\u003e\n      \u003c/Enable\u003e\n      \u003cDisable feature=\"v2\"\u003e\n        \u003cOldVersion /\u003e\n      \u003c/Disable\u003e\n    \u003c/div\u003e\n  );\n}\n\nfunction App(): JSX.Element {\n  return (\n    \u003cFeatures features={FEATURES}\u003e\n      \u003cRestOfApp /\u003e\n      \u003cToggleFeatures /\u003e\n    \u003c/Features\u003e\n  );\n}\n```\n\n## Documentation\n\n### `Features` component\n\nProvides state and context for managing a set of features.\n\nAvailable props:\n\n- `features: FeatureDescription[]`: description of available features.\n- `disableConsole?: boolean`: indicate the console API\n  should not be enabled (default false)\n- `storage?: Storage`: where to persist\n  overrides (default `window.sessionStorage`)\n\n### `Enabled` and `Disabled` components\n\nRender children depending on which set of features are active.\n\nProps:\n\n- `feature: string | string[]`: if one of these is enabled,\n  the children will render (or not, with Disabled)\n- `allFeatures: string[]`: only if all the specified features are\n  enabled will it render children (or not, with Disabled)\n\n### Hooks\n\n- `useEnabled(features: string | string[])`: return true\n  if any specified features are enabled.\n- `useAllEnabled(features: string | string[])`: return true\n  if all specified features are enabled.\n- `useAllDisabled(features: string | string[])`: return true\n  if all specified features are disabled.\n- `useDisabled(features: string | string[])`: return true\n  iff any specified features are disabled.\n\n### `ToggleFeatures` component\n\nRenders all current features specified in `Features`,\nand whether they are enabled or disabled,\nwith checkboxes to toggle them.\nRendered HTML has class `toggle-features` for custom styling.\nYou might use this in a Portal,\nand style it to float on top of the screen in developer builds.\n\n### `EnableContext` component\n\nThis component can be used if you want to do your own state management\nor custom feature storage.\nInstead of using `Features`,\nyou would wrap your tree,\nproviding a custom test function.\n\n```js\n  return (\n    \u003cEnableContext.Provider test={feature =\u003e myCustomFeatureEnabled(feature)}\u003e\n      ...\n    \u003c/EnableContext.Provider\u003e\n  \u003e\n```\n\n### `console` Interface\n\nIn addition to `ToggleFeatures`,\nit is possible to toggle features on the console,\nif configured.\nTo enable pass a boolean to `consoleOverride` prop\n(you might want to feed this from an environment variable for\ndev vs prod builds, for example):\n\n```js\n\u003cFeatures features={FEATURES}\u003e\n  \u003cRestOfApp /\u003e\n\u003c/Features\u003e\n```\n\nThen in the browser console,\nyou can use features:\n\n```js\n// toggle feature from enabled\u003c-\u003edisabled, unset-\u003eenabled\nwindow.feature.toggle('foo');\n\n// force to enabled or disabled, respectively\nwindow.feature.enable('foo');\nwindow.feature.disable('foo');\n\n// Unset the override, and hence let the default take over\nwindow.feature.unset('foo');\n\n// show all configured feature names and the current state of the feature\nwindow.feature.listFeatures();\n```\n\nThis can be useful for toggling features in production builds.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpliosoft%2Freact-enable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpliosoft%2Freact-enable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpliosoft%2Freact-enable/lists"}