{"id":44310725,"url":"https://github.com/wheniwork/ld-redux-components","last_synced_at":"2026-02-11T04:07:02.212Z","repository":{"id":32245171,"uuid":"131319221","full_name":"wheniwork/ld-redux-components","owner":"wheniwork","description":"[DEPRECATED] Launch Darkly Helper Components that leverage the ld-redux libary","archived":false,"fork":false,"pushed_at":"2023-03-04T04:13:18.000Z","size":885,"stargazers_count":5,"open_issues_count":9,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-22T08:10:38.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/wheniwork.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-04-27T16:14:36.000Z","updated_at":"2022-03-07T16:45:49.000Z","dependencies_parsed_at":"2024-10-25T00:17:46.330Z","dependency_job_id":"0289e3b8-0f4c-4e95-bc68-0112bab7f3a8","html_url":"https://github.com/wheniwork/ld-redux-components","commit_stats":{"total_commits":60,"total_committers":6,"mean_commits":10.0,"dds":0.4666666666666667,"last_synced_commit":"4506c6a6f0a7d56b955725dc8cd8e660d8a4abe5"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/wheniwork/ld-redux-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheniwork%2Fld-redux-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheniwork%2Fld-redux-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheniwork%2Fld-redux-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheniwork%2Fld-redux-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wheniwork","download_url":"https://codeload.github.com/wheniwork/ld-redux-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheniwork%2Fld-redux-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29326957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T03:52:29.695Z","status":"ssl_error","status_checked_at":"2026-02-11T03:52:23.094Z","response_time":97,"last_error":"SSL_read: 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":[],"created_at":"2026-02-11T04:07:01.687Z","updated_at":"2026-02-11T04:07:02.191Z","avatar_url":"https://github.com/wheniwork.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ld-redux-components\n\n[![npm version](https://img.shields.io/npm/v/ld-redux-components.svg?style=flat-square)](https://www.npmjs.com/package/ld-redux-components) [![npm version](https://img.shields.io/npm/dm/ld-redux-components.svg?style=flat-square)](https://www.npmjs.com/package/ld-redux-components) [![npm version](https://img.shields.io/npm/dt/ld-redux-components.svg?style=flat-square)](https://www.npmjs.com/package/ld-redux-components) [![npm version](https://img.shields.io/npm/l/ld-redux-components.svg?style=flat-square)](https://github.com/wheniwork/ld-redux-components/blob/master/LICENSE) ![build](https://api.travis-ci.org/wheniwork/ld-redux-components.svg?branch=master)\n\n## Deprecation Notice\n\n⚠️ This is deprecated software ⚠️. See [React SDK Reference](https://docs.launchdarkly.com/sdk/client-side/react/react-web) for instructions on how to use the LaunchDarkly React SDK, including usage with [React Hooks](https://docs.launchdarkly.com/sdk/client-side/react/react-web#hooks).\n\n## Description\n\n\u003e Feature Flag Components for Launch Darkly that work seemlessly with redux\n\n_ld-redux-components_ is a helper library for Launch Darkly in React that relies on your feature flags being stored in redux.\n\nIt is recommended that you use [ld-redux](https://github.com/yusinto/ld-redux), as it provides an easy and clean way to connect Launch Darkly flags to redux, and works as a nice wrapper for [ldclient-js](https://github.com/launchdarkly/js-client).\n\n## Getting Started\n\nYou should define your Launch Darkly redux strategy before using _ld-redux-components_. It won't work without your flags in redux. As stated above, [ld-redux](https://github.com/yusinto/ld-redux) is the best option, but the only compatability requirement is that you nest your flags in an object of key/value pairs under a key in the base of your redux store. Here is an example of what your store might look like,\n\n```javascript\n{\n    ...,\n    \"LD\": {\n        \"debugger\": true,\n        \"newFeature\": \"on\",\n        \"tasks\": false,\n    },\n    ...,\n}\n```\n\n(note: the above example is using `camelCase` as _ld-redux_ does, but you can store the flags as `lisp-case` if you so choose)\n\n## Installation\n\n```bash\nyarn add ld-redux-components\n# or\nnpm install ld-redux-components\n```\n\n## Quickstart\n\n1.  In your client bootstrap, initialize _ld-redux-components_:\n\n```jsx\nimport { ldrComponentConfig } from 'ld-redux-components';\n\n//This value will be the key in your redux store where your flags are stored\nldrComponentConfig.init({\n  reduxKey: \"LD\"\n});\n```\n\n2.  Import and use `Feature` and `Variant` helper components in a component:\n\n```jsx\nimport React, { Component } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class FeatureDisplay extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cVariant variation={ true }\u003e\n          \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n        \u003c/Variant\u003e\n        \u003cVariant variation={ false }\u003e\n          \u003cItem name=\"FLAG IS FALSE\" icon=\"frown\" color=\"red\" /\u003e\n        \u003c/Variant\u003e\n        \u003cVariant isDefault\u003e\n          \u003cItem name=\"FLAG IS NULL/UNDEFINED\" icon=\"meh\" color=\"blue\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\nBoom! `ld-redux-components` is working! Notice how there is no need to connect your component, as the `Feature` component does that heavy lifting for you. Just add `Feature` and `Variant` components where you please.\n\n## Components\n\n### `Feature`\n\n#### props\n\n| name         | type                      | required | default | description                       |\n| -----------  | ------------------------- | -------- | ------- | --------------------------------- |\n| `flagName`   | string                    | `true`   | -       | name of flag stored in redux      |\n| `variation`  | string, bool, array, null | `false`  | -       | value of flag                     |\n| `onReady`    | function                  | `false`  | -       | callback fired when ld connected  |\n| `waitForLD`  | bool                      | `false`  | `false` | wait to render until ld connected |\n| `liveUpdate` | bool                      | `false`  | `true`  | rerender after initial LD load    |\n\n#### Usage Details\n\n* `Feature` is primarily used as a wrapper of `Variant` components.\n* For cases where you only need to either show or not show something, you can set the `variation` prop. This allows you to avoid using unnecessary `Variant` components when you only have one variation you care about.\n* `variation` should not be set if you plan on using `Variant` components underneath `Feature`.\n\n#### Examples\n\n`Feature`\n\n```jsx\nimport React, { Component } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cVariant variation={ true }\u003e\n          \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n        \u003c/Variant\u003e\n        \u003cVariant variation={ false }\u003e\n          \u003cItem name=\"FLAG IS FALSE\" icon=\"frown\" color=\"red\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\n`Feature` with `variation` prop set and no `Variant` components\n\n```jsx\nimport React, { Component } from 'react';\nimport { Feature } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\" variation={ true }\u003e\n        \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\n### `Variant`\n\n`Variant` MUST be defined underneath a `Feature` component\n\n#### props\n\n| name        | type                      | required | default | description                         |\n| ----------- | ------------------------- | -------- | ------- | ----------------------------------- |\n| `variation` | string, bool, array, null | `false`  | -       | value of flag                       |\n| `isDefault` | bool                      | `false`  | false   | display on null/undefined variation |\n\n#### Usage Details\n\n* Must be defined underneath `Feature` component\n* Will always evaluate against the closest parent `Feature` component (yes, this means you can nest Feature/Variants in other Feature/Variants, and Variants can be deeply nested under Features)\n* `isDefault` can be used as handler in case a flag is undefined or set to null. You can use this in combination with `variation`, or by itself\n\n#### Examples\n\nTwo Variants\n\n```jsx\nimport React, { Component, Fragment } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cVariant variation={ true }\u003e\n          \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n        \u003c/Variant\u003e\n        \u003cVariant variation={ false }\u003e\n          \u003cItem name=\"FLAG IS FALSE\" icon=\"frown\" color=\"red\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\nMultiple Variants\n\n```jsx\nimport React, { Component, Fragment } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cVariant variation=\"control\"\u003e\n          \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n        \u003c/Variant\u003e\n        \u003cVariant variation={ [\"treatment\", \"none\"] }\u003e\n          \u003cItem name=\"FLAG IS FALSE\" icon=\"frown\" color=\"red\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\nVariant with isDefault\n\n```jsx\nimport React, { Component, Fragment } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cVariant variation={ true }\u003e\n          \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n        \u003c/Variant\u003e\n        \u003cVariant isDefault\u003e\n          \u003cItem name=\"FLAG IS NULL/UNDEFINED\" icon=\"meh\" color=\"yellow\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\nDeeply Nested Variant\n\n```jsx\nimport React, { Component, Fragment } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\nimport { SomeOtherComponent } from '\u003cmy-app\u003e/someOtherComponent';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cSomeOtherComponent\u003e\n          \u003cVariant variation={ true }\u003e\n            \u003cItem name=\"FLAG IS TRUE\" icon=\"smile\" color=\"green\" /\u003e\n          \u003c/Variant\u003e\n        \u003c/SomeOtherComponent\u003e\n        \u003cVariant variation={ false }\u003e\n          \u003cItem name=\"FLAG IS FALSE\" icon=\"frown\" color=\"red\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\nFeature/Variants Nested under Feature/Variants\n\n```jsx\nimport React, { Component, Fragment } from 'react';\nimport { Feature, Variant } from 'ld-redux-components';\nimport { Item } from '\u003cmy-app\u003e/item';\n\nexport default class Display extends Component {\n  render() {\n    return (\n      \u003cFeature flagId=\"testFlagId\"\u003e\n        \u003cVariant variation={ true }\u003e\n          \u003cFeature flagId=\"anotherFlagId\"\u003e\n            \u003cVariant variation=\"on\"\u003e\n              \u003cItem name=\"FLAG IS ON\" icon=\"smile\" color=\"green\" /\u003e\n            \u003c/Variant\u003e\n            \u003cVariant variation=\"off\"\u003e\n              \u003cItem name=\"FLAG IS OFF\" icon=\"frown\" color=\"red\" /\u003e\n            \u003c/Variant\u003e\n          \u003c/Feature\u003e\n        \u003c/Variant\u003e\n        \u003cVariant variation={ false }\u003e\n          \u003cItem name=\"FLAG IS FALSE\" icon=\"frown\" color=\"red\" /\u003e\n        \u003c/Variant\u003e\n      \u003c/Feature\u003e\n    );\n  }\n}\n```\n\n#\n\n## Misc.\n\nFor a working example, check this [example app](https://github.com/wheniwork/ld-redux-components-example) out (you'll need to provide your own credentials and flags to get things working locally)\n\n## Contributions\n\nWelcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheniwork%2Fld-redux-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwheniwork%2Fld-redux-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheniwork%2Fld-redux-components/lists"}