{"id":16482864,"url":"https://github.com/yusinto/ld-react","last_synced_at":"2025-03-21T07:30:53.499Z","repository":{"id":57289851,"uuid":"135361592","full_name":"yusinto/ld-react","owner":"yusinto","description":"Launch Darkly React integration with hooks","archived":false,"fork":false,"pushed_at":"2019-11-12T17:40:33.000Z","size":373,"stargazers_count":31,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-11T13:12:17.266Z","etag":null,"topics":["api","context","context-api","darkly","feature","feature-flag","feature-flags","feature-toggle","feature-toggles","flag","integration","launch","launch-darkly","launchdarkly","ld-react","ldclient","react","toggle"],"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/yusinto.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}},"created_at":"2018-05-29T23:07:12.000Z","updated_at":"2024-05-04T10:44:42.000Z","dependencies_parsed_at":"2022-08-25T04:21:52.517Z","dependency_job_id":null,"html_url":"https://github.com/yusinto/ld-react","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Fld-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Fld-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Fld-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Fld-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yusinto","download_url":"https://codeload.github.com/yusinto/ld-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221812708,"owners_count":16884686,"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":["api","context","context-api","darkly","feature","feature-flag","feature-flags","feature-toggle","feature-toggles","flag","integration","launch","launch-darkly","launchdarkly","ld-react","ldclient","react","toggle"],"created_at":"2024-10-11T13:12:17.123Z","updated_at":"2024-10-28T09:34:38.065Z","avatar_url":"https://github.com/yusinto.png","language":"JavaScript","readme":"# ld-react\n\n[![npm version](https://img.shields.io/npm/v/ld-react.svg?style=flat-square)](https://www.npmjs.com/package/ld-react) [![npm downloads](https://img.shields.io/npm/dm/ld-react.svg?style=flat-square)](https://www.npmjs.com/package/ld-react) [![npm](https://img.shields.io/npm/dt/ld-react.svg?style=flat-square)](https://www.npmjs.com/package/ld-react) [![npm](https://img.shields.io/npm/l/ld-react.svg?style=flat-square)](https://www.npmjs.com/package/ld-react)\n\nThis package has been superseded by the official [LaunchDarkly React SDK](https://github.com/launchdarkly/react-client-sdk). Please use that instead.\n\n\u003e **The quickest and easiest way to integrate launch darkly with react** :tada:\n\nWhy this package?\n* Easy and fast to use. Two steps to get feature flags into your react app.\n* Supports subscription out of the box. You get live changes on the client as you toggle features.\n* You automatically get camelCased keys as opposed to the default kebab-cased.\n* No need for redux! This package uses the new context api which is available from react ^16.3.0. \n \n## Dependency\n\nThis needs react ^16.4.0! It won't work otherwise.\n\n## Installation\n\nyarn add ld-react\n\n## Quickstart\n\n1. Wrap your root app `withFlagProvider`:\n\n    ```js\n    import {withFlagProvider} from 'ld-react';\n\n    const App = () =\u003e\n      \u003cdiv\u003e\n        \u003cHome /\u003e\n     \u003c/div\u003e;\n    \n    export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});\n    ```\n\n2. Wrap your component `withFlags` to get them via props:\n\n    ```js\n    import {withFlags} from 'ld-react';\n\n    const Home = props =\u003e {\n       // flags are available via props.flags\n       return props.flags.devTestFlag ? \u003cdiv\u003eFlag on\u003c/div\u003e : \u003cdiv\u003eFlag off\u003c/div\u003e;\n    };\n \n    export default withFlags(Home);\n    ```\n\nThat's it!\n\n## API\n### withFlagProvider(Component, {clientSideId, user, options})\nThis is a hoc which accepts a component and a config object with the above properties. \n`Component` and `clientSideId` are mandatory.\n\nFor example:\n\n```javascript\nimport {withFlagProvider} from 'ld-react';\n\nconst App = () =\u003e\n  \u003cdiv\u003e\n    \u003cHome /\u003e\n \u003c/div\u003e;\n\nexport default withFlagProvider(App, {clientSideId: 'your-client-side-id'});\n```\n\nThe `user` property is optional. You can initialise the sdk with a custom user by specifying one. This must be an object containing\nat least a \"key\" property. If you don't specify a user object, ld-react will create a default one that looks like this:\n\n```javascript\nconst defaultUser = {\n  key: uuid.v4(), // random guid\n  ip: ip.address(),\n  custom: {\n    browser: userAgentParser.getResult().browser.name,\n    device\n  }\n};\n```\n\nFor more info on the user object, see [here](http://docs.launchdarkly.com/docs/js-sdk-reference#section-users).\n\nThe `options` property is optional. It can be used to pass in extra options such as [Bootstrapping](https://github.com/launchdarkly/js-client#bootstrapping).\nFor example:\n\n```javascript\nwithFlagProvider(Component, {\n    clientSideId,\n    options: {\n      bootstrap: 'localStorage',\n    },\n});\n```\n\n### withFlags(Component)\nThis is a hoc which passes all your flags to the specified component via props. Your flags will be available\nas camelCased properties under `this.props.flags`. For example:\n\n```js\nimport {withFlags} from 'ld-react';\n\nclass Home extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        {\n          this.props.flags.devTestFlag ? // Look ma, feature flag!\n            \u003cdiv\u003eFlag on\u003c/div\u003e\n            :\n            \u003cdiv\u003eFlag off\u003c/div\u003e\n        }\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default withFlags(Home);\n```\n\n### ldClient\nInternally the ld-react initialises the ldclient-js sdk and stores a reference to the resultant ldClient object in memory. \nYou can use this object to access the [official sdk methods](https://github.com/launchdarkly/js-client) directly. \nFor example, you can do things like:\n\n```js\nimport {ldClient} from 'ld-react';\n\nclass Home extends Component {\n \n  // track goals\n  onAddToCard = () =\u003e ldClient.track('add to cart'); \n \n  // change user context\n  onLoginSuccessful = () =\u003e ldClient.identify({key: 'someUserId'});\n  \n  // ... other implementation\n}\n```\n\nFor more info on changing user context, see the [official documentation](http://docs.launchdarkly.com/docs/js-sdk-reference#section-changing-the-user-context).\n\n## Example\nCheck the [example](https://github.com/yusinto/ld-react/tree/master/example) for a fully working spa with \nreact and react-router. Remember to enter your client side sdk in the client [root app file](https://github.com/yusinto/ld-react/blob/master/example/src/universal/app.js) \nand create a test flag called `dev-test-flag` before running the example!\n","funding_links":[],"categories":["Open Source"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Fld-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyusinto%2Fld-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Fld-react/lists"}