{"id":20014703,"url":"https://github.com/willmendesneto/reactor-feature-toggle","last_synced_at":"2025-05-04T22:31:19.912Z","repository":{"id":48083900,"uuid":"93401440","full_name":"willmendesneto/reactor-feature-toggle","owner":"willmendesneto","description":"Feature toggle components integration for your ReactJS application","archived":false,"fork":false,"pushed_at":"2023-03-22T05:27:37.000Z","size":2596,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-08-24T06:33:10.363Z","etag":null,"topics":["feature-flag","feature-toggle","flag","hacktoberfest","react","reactjs","reactor-feature-toggle","toggle"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willmendesneto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-05T12:27:25.000Z","updated_at":"2023-01-25T04:33:02.000Z","dependencies_parsed_at":"2022-08-12T18:11:09.464Z","dependency_job_id":null,"html_url":"https://github.com/willmendesneto/reactor-feature-toggle","commit_stats":null,"previous_names":[],"tags_count":14,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freactor-feature-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freactor-feature-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freactor-feature-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freactor-feature-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/reactor-feature-toggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224413285,"owners_count":17306864,"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-flag","feature-toggle","flag","hacktoberfest","react","reactjs","reactor-feature-toggle","toggle"],"created_at":"2024-11-13T07:43:33.745Z","updated_at":"2024-11-13T07:43:34.365Z","avatar_url":"https://github.com/willmendesneto.png","language":"TypeScript","readme":"# Reactor feature toggle\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/willmendesneto/reactor-feature-toggle.svg)](https://greenkeeper.io/)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/reactor-feature-toggle-sample)\n\n[![npm version](https://badge.fury.io/js/reactor-feature-toggle.svg)](http://badge.fury.io/js/reactor-feature-toggle) [![npm downloads](https://img.shields.io/npm/dm/reactor-feature-toggle.svg)](https://npmjs.org/reactor-feature-toggle)\n\n[![Build Status](https://circleci.com/gh/willmendesneto/reactor-feature-toggle.svg?style=shield)](https://circleci.com/gh/willmendesneto/reactor-feature-toggle)\n[![Coverage Status](https://coveralls.io/repos/willmendesneto/reactor-feature-toggle/badge.svg?branch=master)](https://coveralls.io/r/willmendesneto/reactor-feature-toggle?branch=master)\n[![Dependency Status](https://david-dm.org/willmendesneto/reactor-feature-toggle.svg)](https://david-dm.org/willmendesneto/reactor-feature-toggle)\n\n[![NPM](https://nodei.co/npm/reactor-feature-toggle.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/reactor-feature-toggle)\n[![NPM](https://nodei.co/npm-dl/reactor-feature-toggle.png?height=3\u0026months=3)](https://npmjs.org/reactor-feature-toggle)\n\nYour module to handle with [feature toggles](http://martinfowler.com/bliki/FeatureToggle.html) in ReactJS applications easier.\n\n## Why Feature toggle?\n\n\u003e This is a common concept, but why use this directive instead solve it via server-side rendering?\n\nThe idea of this directive is make this process transparent and easier. So the main point is integrate this directive with other tooling process, such as:\n\n- Server-side rendering;\n- Progressive rendering;\n- Any other that yoy like :)\n\nYou can integrate with WebSockets or handling this in a EventSourcing architecture. It's totally transparent for you and you can integrate easier in your application.\n\n- [Install](#install)\n- [Setup](#setup)\n- [Usage](#usage)\n- [Releases](#releases)\n- [Demo](#demo)\n\n## Install\n\nYou can get it on NPM installing `reactor-feature-toggle` module as a project dependency.\n\n```shell\nnpm install reactor-feature-toggle --save\n# or\nyarn add reactor-feature-toggle\n```\n\nYou can also use the standalone UMD build by including `dist/reactor-feature-toggle.js` in your page. If you do this you'll also need to include the dependencies. For example:\n\n```html\n\u003cscript src=\"https://unpkg.com/react@\u003cpackage-version\u003e\u003c/package-version\u003e/dist/react.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom@\u003cpackage-version\u003e/dist/react-dom.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/reactor-feature-toggle/dist/umd/reactor-feature-toggle.js\"\u003e\u003c/script\u003e\n```\n\n## Setup\n\nYou'll need to import `FeatureToggleProvider` and add it into the root component of your application. So that you can enable/disable features via `FeatureToggle` component any place in your application.\n\nAlso, multiple `FeatureToggleProvider` are allowed, which gives more flexibility for your application.\n\n```javascript\nimport React, { Component } from 'react';\nimport { FeatureToggleProvider, FeatureToggle } from 'reactor-feature-toggle';\n\nconst AppWrapper = () =\u003e {\n  const featureToggleData = {\n    enableMainContent: true,\n    enableDescriptionContent: true,\n    enableSecondContent: false,\n  };\n\n  return (\n    \u003cFeatureToggleProvider featureToggleService={featureToggleData}\u003e\n      \u003cdiv\u003e\n        \u003cFeatureToggle featureName={'enableMainContent'}\u003e\n          \u003cdiv className=\"content\"\u003e\n            \u003cp\u003eThis content is enabled\u003c/p\u003e\n            \u003cFeatureToggle featureName={'enableSecondContent'}\u003e\n              \u003cp\u003eThis content is disabled\u003c/p\u003e\n            \u003c/FeatureToggle\u003e\n            \u003cFeatureToggle featureName={'!enableSecondContent'}\u003e\n              \u003cp\u003e\n                This content is disabled, but should be displayed since it has\n                `!` prefix at `featureName`\n              \u003c/p\u003e\n            \u003c/FeatureToggle\u003e\n          \u003c/div\u003e\n        \u003c/FeatureToggle\u003e\n\n        \u003cFeatureToggle\n          featureName={['enableMainContent', 'enableDescriptionContent']}\n        \u003e\n          \u003cdiv className=\"content\"\u003e\n            \u003cp\u003e\n              This content is enabled since `enableMainContent` and\n              `enableDescriptionContent` are both truthly\n            \u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/FeatureToggle\u003e\n\n        \u003cFeatureToggle\n          featureName={['enableMainContent', '!enableDescriptionContent']}\n        \u003e\n          \u003cdiv className=\"content\"\u003e\n            \u003cp\u003e\n              This content is disabled because `enableMainContent` is truthly\n              and `enableSecondContent` is falsy when using `!` prefix on array\n              of configuration passed via props.\n            \u003c/p\u003e\n            \u003cp\u003e\n              This can be used as a fallback if both feature toggles are not\n              enabled, as an example\n            \u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/FeatureToggle\u003e\n      \u003c/div\u003e\n    \u003c/FeatureToggleProvider\u003e\n  );\n};\n\nexport default AppWrapper;\n```\n\n# Demo\n\nTry out the [demo](https://stackblitz.com/edit/reactor-feature-toggle-sample)!\n\n## Publish\n\nthis project is using `np` package to publish, which makes things straightforward. EX: `np \u003cpatch|minor|major\u003e`\n\n\u003e For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)\n\n## Author\n\n**Wilson Mendes (willmendesneto)**\n\n- \u003chttps://twitter.com/willmendesneto\u003e\n- \u003chttp://github.com/willmendesneto\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Freactor-feature-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Freactor-feature-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Freactor-feature-toggle/lists"}