{"id":25126689,"url":"https://github.com/mihaben/react-modular-feature-flags","last_synced_at":"2025-07-27T22:34:35.445Z","repository":{"id":250442398,"uuid":"834487658","full_name":"mihaben/react-modular-feature-flags","owner":"mihaben","description":"Modular feature flags management for modern React apps","archived":false,"fork":false,"pushed_at":"2024-07-27T16:56:33.000Z","size":204,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-30T12:25:28.433Z","etag":null,"topics":["configcat","feature","flags","react"],"latest_commit_sha":null,"homepage":"","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/mihaben.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,"zenodo":null}},"created_at":"2024-07-27T12:20:53.000Z","updated_at":"2024-08-05T06:34:53.000Z","dependencies_parsed_at":"2024-07-27T13:42:23.571Z","dependency_job_id":"e47a6c8b-d279-445e-9164-460769dc1aa6","html_url":"https://github.com/mihaben/react-modular-feature-flags","commit_stats":null,"previous_names":["mihaben/react-modular-feature-flags"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/mihaben/react-modular-feature-flags","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mihaben%2Freact-modular-feature-flags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mihaben%2Freact-modular-feature-flags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mihaben%2Freact-modular-feature-flags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mihaben%2Freact-modular-feature-flags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mihaben","download_url":"https://codeload.github.com/mihaben/react-modular-feature-flags/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mihaben%2Freact-modular-feature-flags/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267436674,"owners_count":24086898,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["configcat","feature","flags","react"],"created_at":"2025-02-08T10:24:19.449Z","updated_at":"2025-07-27T22:34:35.146Z","avatar_url":"https://github.com/mihaben.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-modular-feature-flags\n\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cpicture\u003e\n        \u003cimg alt=\"react-modular-feature-flags\" width=\"480px\" src=\"./public/react-modular-feature-flags-logo.svg\" /\u003e\n    \u003c/picture\u003e\n    \u003cp align=\"center\"\u003eModular feature flags management for modern React apps\u003c/p\u003e\n\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![NPM version](https://badge.fury.io/js/react-modular-feature-flags.svg)](http://badge.fury.io/js/react-modular-feature-flags)\n\n\u003c/div\u003e\n\n## Table of contents\n\n- [About](#about)\n- [Installation](#installation)\n- [FeatureFlags API](#featureflags-api)\n- [Channels](#channels)\n  - [Cookies](#cookies)\n  - [Query Params](#query-params)\n  - [Custom event](#custom-event)\n  - [Configcat](#configcat)\n  - [Custom channel](#custom-channel)\n\n## About\n\n`react-modular-feature-flags` is a powerful library designed to manage the state of feature flags in your React applications. This library allows seamless integration of multiple channels to activate and deactivate feature flags, providing a highly flexible and modular approach to feature management.\n\nKey features include:\n\n- **Singleton Class:** Ensures a single source of truth for all your feature flags.\n- **Multiple Channels:** Connect various channels such as query params, custom events, cookies, remote flaggers, and more to control feature flags.\n- **State Resolution:** Automatically resolves the state of each feature flag by processing inputs from different channels based on their priority.\n- **Custom Channels:** Create and integrate your custom channels to manage feature flags as per your unique requirements.\n- **Real-Time Access:** Access the current state of any feature flag at any moment using our hook `useFeatureFlag`.\n- **TypeScript Support:** Fully typed with TypeScript for enhanced developer experience and code safety.\n\n![Diagram](./public/react-modular-feature-flags%20diagram.svg)\n\n\u003e [!TIP]  \n\u003e You can see our sample project [here](/example/src/App.tsx).\n\n## Installation\n\n```bash\n#Yarn\nyarn add react-modular-feature-flags\n\n#NPM\nnpm install react-modular-feature-flags\n```\n\nOnce the package is installed, you can import the library in your app.\n\n```js\nimport featureFlags from \"react-modular-feature-flags\";\n```\n\nInitialize the library. You can set default flags at this point:\n\n```js\nfeatureFlags.init({\n  defaultFeatureFlags: { foo: true },\n});\n```\n\nNext you must add the different channels you want to support. You can add as many channels as you need.\n\n```js\nfeatureFlags.initChannel({ priority: 1 }, new MyChannel());\n```\n\n\u003e [!TIP]\n\u003e Learn more about the [available channels](#channels) or how to [create your own custom channel](#custom-channel).\n\nFinally, you can access the value of the feature flag within your components using the following `hook`:\n\n```js\nconst flagValue = useFeatureFlag(\"foo\");\n```\n\n## FeatureFlags API\n\n### Methods\n\n| Prop          | Type                                                 | Description                                                                                  |\n| ------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| `init`        | `({defaultProps?: Record\u003cstring, boolean\u003e}) =\u003e void` | Initializes the library                                                                      |\n| `initChannel` | `({priority: number}, Channel) =\u003e void`              | Initializes a channel with a specific priority. Higher priorities overwrite lower priorities |\n| `getFlags`    | `() =\u003e Record\u003cstring, boolean\u003e`                      | Returns the value of all computed flags                                                      |\n| `getFlag`     | `(flag:String) =\u003e boolean`                           | Returns the value of a specific flag                                                         |\n\n## Channels\n\n\u003e A channel is a mechanism through which feature flags can be activated or deactivated. Each channel listens to specific sources and communicates the state of these flags to the library. Channels allow for dynamic and flexible control over feature flags, ensuring that the application's features can be toggled based on various contexts and conditions.\n\n### Cookies\n\n\u003e [!NOTE]  \n\u003e The Cookies channel leverages browser cookies to store and retrieve feature flag states. This is particularly useful for maintaining feature state across different sessions and ensuring a consistent user experience.\n\n**How to trigger?**\n\n```js\ndocument.cookie = \"featureFlags=bar,foo=false,baz\";\n```\n\n**API**\n\n| Prop   | Type     | Required | Default value  | Description                |\n| ------ | -------- | -------- | -------------- | -------------------------- |\n| `key`  | `string` | `false`  | `featureFlags` | Sets the key of the cookie |\n| `root` | `Window` | `false`  | `window`       | Sets the global object     |\n\n### Query Params\n\n\u003e [!NOTE]  \n\u003e The Query Params channel enables you to control feature flags through URL parameters. By appending specific parameters to the URL, you can easily toggle features for debugging or testing purposes without altering the codebase.\n\n**How to trigger?**\n\n```\nmy-website.com?featureFlags=bar,foo=false,baz\n```\n\n**API**\n\n| Prop   | Type     | Required | Default value  | Description                     |\n| ------ | -------- | -------- | -------------- | ------------------------------- |\n| `key`  | `string` | `false`  | `featureFlags` | Sets the key of the query param |\n| `root` | `Window` | `false`  | `window`       | Sets the global object          |\n\n### Custom event\n\n\u003e [!NOTE]  \n\u003e The Custom Events channel allows feature flags to be controlled via events dispatched within your application. This provides a dynamic way to manage feature states based on user interactions or other custom triggers.\n\n**How to trigger?**\n\n```js\nwindow.dispatchEvent(\n  new CustomEvent(\"flags:update\", {\n    detail: { bar: true, baz: true, foo: false },\n  })\n);\n```\n\n**API**\n\n| Prop      | Type           | Required | Default value | Description                   |\n| --------- | -------------- | -------- | ------------- | ----------------------------- |\n| `options` | `EventOptions` | `false`  | -             | Sets the options of the event |\n| `root`    | `Window`       | `false`  | `window`      | Sets the global object        |\n\n#### EventOptions\n\n| Prop        | Type         | Required | Default value  | Description                             |\n| ----------- | ------------ | -------- | -------------- | --------------------------------------- |\n| `eventName` | `string`     | `false`  | `flags:update` | Sets the key of the event               |\n| `onChange`  | `() =\u003e void` | `false`  | -              | Callback invoked when event is executed |\n\n### Configcat\n\n\u003e [!NOTE]  \n\u003e The ConfigCat channel integrates with the [ConfigCat service](https://configcat.com/) to manage feature flags remotely. This channel allows you to update feature flags in real-time from a centralized dashboard, offering a powerful way to control feature rollout across different environments and user segments.\n\n| Prop        | Type        | Required | Default value | Description       |\n| ----------- | ----------- | -------- | ------------- | ----------------- |\n| `configCat` | `ConfigCat` | `true`   | -             | ConfigCat library |\n| `options`   | `Options`   | `true`   | -             | Sets the options  |\n\n#### Options\n\n| Prop                  | Type                      | Required | Default value | Description                      |\n| --------------------- | ------------------------- | -------- | ------------- | -------------------------------- |\n| `SDKKey`              | `string`                  | `true`   | -             | SDKKey of your ConfigCat project |\n| `defaultFlags`        | `Record\u003cstring, boolean\u003e` | `false`  | `{}`          | Default feature flags            |\n| `pollIntervalSeconds` | `number`                  | `false`  | `150`         | Polling interval                 |\n\n### Custom channel\n\n\u003e [!NOTE]  \n\u003e If you need to, you can create your own custom channels connected to the services your project requires.\n\u003e\n\u003e In this simple example we create a channel that turns on a flag when passing a specific number of ms.\n\n```ts\n// my-custom-channel.class.ts\n\nimport {\n  BaseChannel,\n  FeatureFlagsChannel,\n  Flags,\n} from \"react-modular-feature-flags\";\n\ninterface MyCustomChannelProps {\n  key: string;\n  delay: number;\n}\n\nexport default class MyCustomChannel\n  extends BaseChannel\n  implements FeatureFlagsChannel\n{\n  key: string;\n  delay: number;\n  flags: Flags;\n\n  constructor(props: MyCustomChannelProps) {\n    super();\n    this.key = props.key;\n    this.delay = props.delay;\n    this.flags = {};\n  }\n\n  init() {\n    setTimeout(() =\u003e {\n      this.flags = {\n        ...this.flags,\n        [this.key]: true,\n      };\n      this.update(this.flags);\n    }, this.delay);\n  }\n\n  getFlags() {\n    return this.flags;\n  }\n}\n```\n\n```tsx\n// App.ts\n\n...\n\nfeatureFlags.initChannel({ priority: 1 }, new MyCustomChannel({key:\"bar\", delay: 2000}));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmihaben%2Freact-modular-feature-flags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmihaben%2Freact-modular-feature-flags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmihaben%2Freact-modular-feature-flags/lists"}