{"id":22021826,"url":"https://github.com/foo-software/react-feature-toggle","last_synced_at":"2026-05-17T00:02:20.859Z","repository":{"id":42845891,"uuid":"262600432","full_name":"foo-software/react-feature-toggle","owner":"foo-software","description":"A feature toggle for React","archived":false,"fork":false,"pushed_at":"2023-01-06T05:25:30.000Z","size":1401,"stargazers_count":0,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T16:24:21.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/foo-software.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}},"created_at":"2020-05-09T15:27:19.000Z","updated_at":"2020-07-02T13:36:52.000Z","dependencies_parsed_at":"2023-02-05T10:15:55.162Z","dependency_job_id":null,"html_url":"https://github.com/foo-software/react-feature-toggle","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-feature-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-feature-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-feature-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo-software%2Freact-feature-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo-software","download_url":"https://codeload.github.com/foo-software/react-feature-toggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245085842,"owners_count":20558476,"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":[],"created_at":"2024-11-30T06:15:25.164Z","updated_at":"2025-10-24T20:51:02.068Z","avatar_url":"https://github.com/foo-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Feature Toggle\n\n\u003e `@foo-software/react-feature-toggle`\n\nA feature toggle for React. Feature toggles (otherwise known as feature flags or feature switches) are a software development technique that provides a way of turning functionality or display on and off during runtime, without deploying new code. This allows for more control and experimentation over the full lifecycle of features. Feature toggles are a best practice in DevOps, often occurring within distributed version control systems.\n\n## Setup\n\nThis library depends on a [feature toggle account with Foo](https://www.foo.software). Follow the steps below to get started.\n\n1. Choose an account from the [plans page](https://www.foo.software/pricing) and register.\n2. Navigate to the account page and click on the API tab. Make note of the account ID.\n3. Create a feature toggle in the dashboard. If needed [follow the docs](https://www.foo.software/toggle-tools-how-to-create-a-feature-toggle/)!\n4. Navigate to the toggle detail page through the dashboard screen and make note of the \"Environment API Name\" and \"Toggle API Name\".\n\nAt this point you should have three items noted: account ID, environment name, and toggle name.\n\n## Usage\n\nYou'll need to use a \"provider\" to setup configuration at the application level. You could do this in `App.js` for example.\n\n\u003e App.js\n\n```jsx\nimport React from 'react';\n// other imports...\nimport { ToggleProvider } from '@foo-software/react-feature-toggle';\n\n// this is just an example, but these values can come from anywhere\n// you're comfortable with\nconst {\n  REACT_APP_TOGGLE_ACCOUNT_ID,\n  REACT_APP_TOGGLE_ENVIRONMENT,\n} = process.env;\n\nexport default () =\u003e {\n  // things...\n  return (\n    \u003cToggleProvider\n      accountId={REACT_APP_TOGGLE_ACCOUNT_ID}\n      environmentName={REACT_APP_TOGGLE_ENVIRONMENT}\n    \u003e\n      {/* all the things here */}\n    \u003c/ToggleProvider\u003e\n  )\n};\n```\n\nWith the above you can use the `useToggle` hook like so.\n\n\u003e Example.js\n\n```jsx\nimport { useToggle } from '@foo-software/react-feature-toggle';\n\nexport default () =\u003e {\n  const { isOn } = useToggle({ toggleName: 'example' });\n\n  return (\n    \u003c\u003e\n      {isOn \u0026\u0026 (\n        \u003cdiv\u003e\n          My example feature.\n        \u003c/div\u003e\n      )}\n      \u003cdiv\u003e\n        Some other thing.\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## `ToggleProvider`: Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eaccountId\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eyes\u003c/td\u003e\n    \u003ctd\u003eThe account ID of your Toggle Tools account as explained in the \u003ca href=\"#setup\"\u003esetup section\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eenvironmentName\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eyes\u003c/td\u003e\n    \u003ctd\u003eThe environment the toggle belongs to by name as explained in the \u003ca href=\"#setup\"\u003esetup section\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003efetch\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003efunction\u003c/td\u003e\n    \u003ctd\u003eno\u003c/td\u003e\n    \u003ctd\u003eBy default React Feature Toggle will use the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\"\u003eFetch Web API\u003c/a\u003e to fetch toggle state from Toggle Tools API. This prop can be used to override by providing preferable fetch function. It should share the same API.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003echildren\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003eyes\u003c/td\u003e\n    \u003ctd\u003eThe node to be rendered by the provider. This is similar to any standard provider component.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## `useToggle`\n\nAccepts an object argument with a `toggleName` property. `toggleName` should be the value described in the [setup section](#setup).\n\n#### `useToggle`: Return Object\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eisOn\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003eSignifies whether the toggle is toggled on.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003estatus\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eoneOf([\u003ccode\u003enull\u003c/code\u003e, \"\u003ccode\u003epending\u003c/code\u003e\", \"\u003ccode\u003efulfilled\u003c/code\u003e\", \"\u003ccode\u003erejected\u003c/code\u003e\"])\u003c/td\u003e\n    \u003ctd\u003eFetch status of the toggle.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## `ToggleContext`\n\nA React context set by `ToggleProvider`. It holds values from props passed to `ToggleProvider` with the addition of a value named `toggles`. `toggles` is a collection of all toggles set in the current runtime. Below is an example.\n\n```json\n{\n  \"myToggle1\": {\n    \"isOn\": false,\n    \"status\": \"fulfilled\"\n  },\n  \"myToggle2\": {\n    \"isOn\": null,\n    \"status\": \"rejected\"\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo-software%2Freact-feature-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo-software%2Freact-feature-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo-software%2Freact-feature-toggle/lists"}