{"id":33216643,"url":"https://github.com/lectra-tech/ld-react-feature-flags","last_synced_at":"2026-04-08T12:33:09.378Z","repository":{"id":33274978,"uuid":"159643178","full_name":"lectra-tech/ld-react-feature-flags","owner":"lectra-tech","description":"Integrate Launch Darkly in your React app in a breeze","archived":false,"fork":false,"pushed_at":"2026-01-30T20:05:12.000Z","size":315,"stargazers_count":10,"open_issues_count":8,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-01-31T12:08:15.987Z","etag":null,"topics":["feature-flags","feature-flipping","launch-darkly","launchdarkly","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/lectra-tech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-11-29T09:45:32.000Z","updated_at":"2026-01-30T19:56:38.000Z","dependencies_parsed_at":"2024-10-29T13:29:14.991Z","dependency_job_id":null,"html_url":"https://github.com/lectra-tech/ld-react-feature-flags","commit_stats":{"total_commits":65,"total_committers":14,"mean_commits":4.642857142857143,"dds":0.7384615384615385,"last_synced_commit":"ad77a35dccab5428fd10b001a93a454d33116ffc"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/lectra-tech/ld-react-feature-flags","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lectra-tech%2Fld-react-feature-flags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lectra-tech%2Fld-react-feature-flags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lectra-tech%2Fld-react-feature-flags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lectra-tech%2Fld-react-feature-flags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lectra-tech","download_url":"https://codeload.github.com/lectra-tech/ld-react-feature-flags/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lectra-tech%2Fld-react-feature-flags/sbom","scorecard":{"id":582338,"data":{"date":"2025-08-11","repo":{"name":"github.com/lectra-tech/ld-react-feature-flags","commit":"ad77a35dccab5428fd10b001a93a454d33116ffc"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":2,"reason":"Found 6/25 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cicd.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/lectra-tech/ld-react-feature-flags/cicd.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cicd.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/lectra-tech/ld-react-feature-flags/cicd.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/cicd.yml:28","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/cicd.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact v1.0.39 not signed: https://api.github.com/repos/lectra-tech/ld-react-feature-flags/releases/32804720","Warn: release artifact v1.0.38 not signed: https://api.github.com/repos/lectra-tech/ld-react-feature-flags/releases/25491313","Warn: release artifact v1.0.39 does not have provenance: https://api.github.com/repos/lectra-tech/ld-react-feature-flags/releases/32804720","Warn: release artifact v1.0.38 does not have provenance: https://api.github.com/repos/lectra-tech/ld-react-feature-flags/releases/25491313"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-20T19:29:56.955Z","repository_id":33274978,"created_at":"2025-08-20T19:29:56.955Z","updated_at":"2025-08-20T19:29:56.955Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31556232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["feature-flags","feature-flipping","launch-darkly","launchdarkly","react"],"created_at":"2025-11-16T14:00:17.342Z","updated_at":"2026-04-08T12:33:09.364Z","avatar_url":"https://github.com/lectra-tech.png","language":"JavaScript","funding_links":[],"categories":["Open Source"],"sub_categories":[],"readme":"# ld-react-feature-flags\n\n[![Build Status](https://travis-ci.org/lectra-tech/ld-react-feature-flags.svg?branch=master)](https://travis-ci.org/lectra-tech/ld-react-feature-flags)\n[![NPM](https://img.shields.io/npm/v/@lectra/ld-react-feature-flags.svg)](https://www.npmjs.com/package/@lectra/ld-react-feature-flags)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n\u003e Integrate Launch Darkly in your React app in a breeze\n\n## Install\n\nThis project requires **React 16.3.0 or later**.\n\nTo use ld-react-feature-flags with your React app, install it as a dependency:\n\n```bash\nnpm install @lectra/ld-react-feature-flags\n```\n\n## Getting Started\n\n### FlagsProvider\n\nWrap your root component with `FlagsProvider` to make LaunchDarkly client instance accessible to all children components thanks to React context.\n\n```javascript\n// React 17 and lower\n\nimport ReactDOM from 'react-dom';\nimport { FlagsProvider } from '@lectra/ld-react-feature-flags';\n\nReactDOM.render(\n  \u003cFlagsProvider user={user} clientkey=\"myClientKey\" loadingComponent ={\u003cdiv\u003eplease wait\u003c/div\u003e}\u003e\n    \u003cApp /\u003e\n  \u003c/FlagsProvider\u003e,\n  document.getElementById('root')\n);\n```\n\n```javascript\n// React 18 and higher\n\nimport { createRoot } from 'react-dom/client';\nimport { FlagsProvider } from '@lectra/ld-react-feature-flags';\n\nconst root = createRoot(document.getElementById('root'));\n\nroot.render(\n  \u003cFlagsProvider user={user} clientkey=\"myClientKey\" loadingComponent ={\u003cdiv\u003eplease wait\u003c/div\u003e}\u003e\n    \u003cApp /\u003e\n  \u003c/FlagsProvider\u003e\n);\n```\n\n| Prop             | Type      | Required | Description                  |\n|------------------|-----------|----------|------------------------------|\n| user             | Object    | true     | User information             |\n| clientkey        | String    | true     | Your LaunchDarkly secret key |\n| onFlagsChange    | function  | false    | Handler for flag change      |\n| loadingComponent | Component | false    | Loading component / string   |\n\n### Flags\n\nAll `Flags` components get the _ldClient_ instance thanks to the `FlagsProvider` component.\n\nTo render a node or a component based on your flags, you must pass a `flag` props.\n\nThe `Flags` component will ask to LaunchDarkly if the given flag is active or not, depending on you LaunchDarkly settings.\n\nYou have the control on what will be rendered:\n\n* If the flag is active, you can wrapped the desired component to render as children to a Flag component or use a `renderOn` props.\n\n* If the flag isn't active, nothing will be rendered unless you pass a component as fallback by the `fallbackRender` props.\n\n\n| Prop           | Type              | Required | Description                                               |\n|----------------|-------------------|----------|-----------------------------------------------------------|\n| flag           | String            | true     | The flag to check                                         |\n| children       | Element/Component | false    | Return the component if the flag given by props is active |\n| renderOn       | Function          | false    | Return the given component if the flag is active          |\n| fallbackRender | Function          | false    | Return the given component if the flag is inactive        |\n\n#### with children props\n\n```javascript\nimport { Flags } from '@lectra/ld-react-feature-flags';\n\n\u003cFlags\n  flag=\"beta-only\"\n\u003e\n  \u003ch4\u003efor beta users\u003c/h4\u003e\n\u003c/Flags\u003e\n```\n\n#### with renderOn props\n\n```javascript\nimport { Flags } from '@lectra/ld-react-feature-flags';\n\n\u003cFlags\n  flag=\"beta-only\"\n  renderOn={flag =\u003e \u003ch4\u003efor beta users\u003c/h4\u003e}\n/\u003e\n```\n\n#### with renderOn props and fallbackRender props as fallback\n\n```javascript\nimport { Flags } from '@lectra/ld-react-feature-flags';\n\n\u003cFlags\n  flag=\"beta-only\"\n  renderOn={flag =\u003e \u003ch4\u003efor beta users\u003c/h4\u003e}\n  fallbackRender={flag =\u003e (\n    \u003ch4\u003efor regular users\u003c/h4\u003e\n  )}\n/\u003e\n```\n\n#### with multivariant  flag\n\nThe flag given by props is a multivariant flag.\nSee the [LaunchDarkly doc](https://docs.launchdarkly.com/docs/managing-variations) for more details.\n\nIf the flag is active, LD won't return a boolean value but instead a custom value. In our case a string that represents a color.\nWe can use it directly to style our `h1` title.\n\n```javascript\nimport { Flags } from '@lectra/ld-react-feature-flags';\n\n\u003cFlags\n  flag=\"header-bg-color\"\n  renderOn={flag =\u003e {\n    return (\n      \u003ch1 style={{ color: flag.headerBgColor }}\u003e\n        My awesome multivariant flag\n      \u003c/h1\u003e\n    );\n  }}\n/\u003e\n```\n\n### WithFlags\n\nSame as `Flags` components but in a Higher Order Component way.\n\n`WithFlags([flag])([ComponentToRenderIfTrue][ComponentToRenderIfFalse])`\n\n\n| Arguments                | Type            | Required | Description                                                                 |\n|--------------------------|-----------------|----------|-----------------------------------------------------------------------------|\n| flag                     | String          | true     | The flag to check                                                           |\n| ComponentToRenderIfTrue  | React Component | true     | The React component to render if the flag is true or is a multivariant flag |\n| ComponentToRenderIfFalse | React Component | false    | The React component to render if the flag is false                          |\n\n#### Component render based on flag value\n\n```javascript\nimport { WithFlags } from '@lectra/ld-react-feature-flags';\n\nconst HBeta = () =\u003e \u003ch4\u003efor beta users\u003c/h4\u003e;\nconst HeaderFeatureFlipped = WithFlags(\"beta-only\")(HBeta)\n\n\u003cHeaderFeatureFlipped\u003e\u003c/HeaderFeatureFlipped\u003e\n```\n\n#### Component render toggled on flag value\n\n```javascript\nimport { WithFlags } from '@lectra/ld-react-feature-flags';\n\nconst HBeta = () =\u003e \u003ch4\u003efor beta users\u003c/h4\u003e;\nconst HStandard = () =\u003e \u003ch4\u003efor standard users\u003c/h4\u003e;\nconst HeaderFeatureFlipped = WithFlags(\"beta-only\")(HBeta, HStandard)\n\n\u003cHeaderFeatureFlipped\u003e\u003c/HeaderFeatureFlipped\u003e\n```\n\n#### Component render with multivariant flag\n\n```javascript\nimport { WithFlags } from '@lectra/ld-react-feature-flags';\n\nconst HeaderWithColor = ({headerBgColor}) =\u003e (\n    \u003ch1 style={{ color: headerBgColor }}\u003e\n        My awesome multivariant flag\n    \u003c/h1\u003e);\nconst HeaderFeatureFlippedWithColor = WithFlags(\"header-bg-color\")(HeaderWithColor)\n\n\u003cHeaderFeatureFlippedWithColor\u003e\u003c/HeaderFeatureFlippedWithColor\u003e\n```\n\n\n## Example\n\nThis project contains some examples that you could run.\n\n```bash\ngit clone https://github.com/lectra-tech/ld-react-feature-flags.git\ncd ld-react-feature-flags/example\nnpm install\nnpm start\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flectra-tech%2Fld-react-feature-flags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flectra-tech%2Fld-react-feature-flags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flectra-tech%2Fld-react-feature-flags/lists"}