{"_id":"@dexterns88/ld-redux","name":"@dexterns88/ld-redux","dist-tags":{"latest":"4.0.6"},"versions":{"4.0.6":{"name":"@dexterns88/ld-redux","version":"4.0.6","description":"A library to integrate launch darkly with react redux","main":"lib/index.js","scripts":{"test":"jest","build":"rimraf lib/* && babel src -d lib --ignore *.test.js","lint":"eslint --cache --format 'node_modules/eslint-friendly-formatter' ./src","build-publish":"npm run build && npm version patch -m 'Upgrade to %s' && npm publish && git push"},"repository":{"type":"git","url":"git+https://github.com/dexterns88/ld-redux.git"},"keywords":["launch","darkly","react","redux","feature","flags","toggles"],"author":{"name":"Marcus Svehlak"},"license":"MIT","bugs":{"url":"https://github.com/dexterns88/ld-redux/issues"},"homepage":"https://github.com/dexterns88/ld-redux#readme","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^10.0.0","babel-jest":"^23.4.2","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","eslint":"^5.5.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"4.3.0","eslint-friendly-formatter":"^4.0.1","eslint-plugin-babel":"^5.2.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-prettier":"3.1.0","eslint-plugin-react":"^7.11.1","jest":"23.6.0","prettier":"1.17.1","rimraf":"^2.6.2","testdouble":"^3.8.1"},"dependencies":{"ip":"^1.1.5","launchdarkly-js-client-sdk":"^3.1.3","lodash.camelcase":"^4.3.0","ua-parser-js":"^0.7.18","uuid":"^3.3.2"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0"},"directories":{"lib":"lib","test":"test"},"_id":"@dexterns88/ld-redux@4.0.6","gitHead":"43deccb0abe0b898246aec7d28e474bdc65e63c7","_nodeVersion":"16.20.0","_npmVersion":"9.8.0","dist":{"integrity":"sha512-P7UoEltOZGkWzF8jYAmGJKauRElQpF3q9CRyk3R1Ih0uQCxigwhiiCJ2K405mU3Km1arhI7f712kmayW+yjaaQ==","shasum":"c0e5de26bbff2ee09d8a25323f9ccfac97e7c5fc","tarball":"https://registry.npmjs.org/@dexterns88/ld-redux/-/ld-redux-4.0.6.tgz","fileCount":7,"unpackedSize":14384,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChASF0pfSoukO/gkEnoLcwEI4Te67uPTESZ7+9jGk+ZgIhAJBdM/njlZI+R8mD28XYyCQavLIQAEQhEuY/2QjGtnTG"}]},"_npmUser":{"name":"dexterns88","email":"dexterns88@gmail.com"},"maintainers":[{"name":"dexterns88","email":"dexterns88@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ld-redux_4.0.6_1701087093679_0.7423319582193832"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-27T12:11:33.552Z","4.0.6":"2023-11-27T12:11:33.843Z","modified":"2023-11-27T12:11:34.104Z"},"maintainers":[{"name":"dexterns88","email":"dexterns88@gmail.com"}],"description":"A library to integrate launch darkly with react redux","homepage":"https://github.com/dexterns88/ld-redux#readme","keywords":["launch","darkly","react","redux","feature","flags","toggles"],"repository":{"type":"git","url":"git+https://github.com/dexterns88/ld-redux.git"},"author":{"name":"Marcus Svehlak"},"bugs":{"url":"https://github.com/dexterns88/ld-redux/issues"},"license":"MIT","readme":"# @dexterns88 fork from @svey/ld-redux\n\nNOTE: add support for React 16\n\n> **A library to integrate launch darkly with react redux** :clap:\n\nHuge shout-out to yusinto. He created the base of this package and if he resumes maintaining I would happily integrate my updates into [yusinto/ld-redux](https://github.com/yusinto/ld-redux). Unfortunately, it looks like yusinto stopped maintaining [yusinto/ld-redux](https://github.com/yusinto/ld-redux) and that's probably why you're here...\n\n[Launch Darkly](https://launchdarkly.com/faq.html) is a great tool for feature flagging and a/b testing. It has a fully capable [client-side javascript sdk](https://github.com/launchdarkly/js-client), so why this package?\n\n This repo picks up where yusinto left off and migrates the launchdarkly [client-side javascript sdk](https://github.com/launchdarkly/js-client) from `^2.13.0` to `^3.1.3`.\n\n **[NPM](https://www.npmjs.com/package/@svey/ld-redux)**\n\n npm i @svey/ld-redux\n\n# Upgrade from yusinto/ld-redux\n\nUpdate your user to a user context see [migration documentation](https://docs.launchdarkly.com/sdk/client-side/javascript/migration-2-to-3#understanding-differences-between-users-and-contexts) (if no context is passed a user context will be generated)\n\nUpdate `ldRedux.init` to:\n\n```javascript\nldRedux.init({\n        clientSideId,\n        dispatch,\n        context // previously this was user see migration documentation above\n        ...\n      });\n```\n\n# Initializing ld-redux\n\n1. In your client bootstrap, initialise the launch darkly client by invoking the init method:\n\n ```javascript\n import ldRedux from '@svey/ld-redux';\n import flags from '../flags';\n import reduxState from '../store/state';\n\n const store = createStore(reduxState);\n\n const context = {\n   kind: 'user',\n   key: 'user-key-123abc',\n   firstName: 'Sandy',\n   lastName: 'Smith',\n   email: 'sandy@example.com',\n   groups: ['Google', 'Microsoft']\n }; // https://docs.launchdarkly.com/sdk/features/user-context-config \n\n ldRedux.init({\n   clientSideId: '59b2b2596d1a250b1c78baa4',\n   dispatch: store.dispatch,\n   flags,\n   context,\n });\n ```\n\n2. Include ldReducer as one of the reducers in your app:\n\n    ```javascript\n    import { combineReducers } from 'redux';\n    import ldRedux from 'ld-redux';\n    import reducers from '<your-project>/reducers';\n\n    export default combineReducers({\n      ...reducers,\n      LD: ldRedux.reducer(), // Note: the LD key can be anything you want\n    });\n    ```\n\n3. Use the flag:\n\n    ```javascript\n    import React, {Component} from 'react';\n    import {connect} from 'react-redux';\n\n    const mapStateToProps = (state) => {\n      const {featureFlagKey} = state.LD; // Note: the key LD must be the same as step 2.\n\n      return {\n        featureFlagKey,\n      };\n    };\n\n    @connect(mapStateToProps)\n    export default class Home extends Component {\n      render() {\n        return (\n          <div>\n            {\n              /* look ma, feature flag! */\n              this.props.featureFlagKey ?\n                <div>\n                  <p>Welcome to feature toggling!</p>\n                </div>\n                :\n                'nothing'\n            }\n          </div>\n        );\n      }\n    }\n    ```\n\n## API\n### init({clientSideId, dispatch, flags, useCamelCaseFlagKeys, context, subscribe, options})\nThe init method accepts an object with the above properties. `clientSideId`, `dispatch` are mandatory.\n\nThe `flags` property is optional. This is an object containing all the flags you want to use and subscribe to in your app.\nIf you don't specify this, ld-redux will subscribe to all flags in your ld environment.\n\n```javascript\n// standard redux createStore\nconst store = createStore();\nconst flags = { 'feature-flag-key': false }; // only subscribe to  this one flag\n\n// do this once\nldRedux.init({\n  clientSideId: 'your-client-side-id',\n  dispatch: store.dispatch,\n  flags,\n});\n```\n\nThe `subscribe` property is optional. This defaults to true which means by default you'll get automatic live updates\nof flag changes from the server. You can turn this off and manually subscribe to flag changes through the ldClient\nobject if for some reason you don't want to get live updates.\n\nThe `context` property is optional. You can initialise the sdk with a custom context by specifying one. If you don't specify a context object, ldRedux will create a default [user context](https://docs.launchdarkly.com/sdk/features/user-context-config ) that looks like this:\n\n```javascript\nconst context = {\n  kind: 'user',\n  key: 'user-key-123abc',\n  firstName: 'Sandy',\n  lastName: 'Smith',\n  email: 'sandy@example.com',\n  groups: ['Google', 'Microsoft']\n};\n```\n\nFor more info on context object, see [here](https://docs.launchdarkly.com/home/contexts#contexts-and-context-kinds).\n\nThe `useCamelCaseFlagKeys` property is optional. This defaults to true which means by default the flags that are stored\nin redux will be camel cased. If this property is false, no transformation on the flag name will be done.\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\nldRedux.init({\n    clientSideId,\n    dispatch,\n    flags,\n    options: {\n      bootstrap: 'localStorage',\n    }\n});\n```\n\n### reducer()\nThis is ld-redux's reducer. You must include this reducer in your app as per step 2 above with any key of your choice.\nYou then use this key to retrieve your flags from redux's state.\n\n### window.ldClient\nInternally the ldRedux.init method above initialises the js sdk and stores the resultant ldClient object in window.ldClient. You can use\nthis object to access the [official sdk methods](https://github.com/launchdarkly/js-client) directly. For example, you can do things like:\n\n```javascript\n// track goals\nwindow.ldClient.track('add to cart');\n\n// change user context\nwindow.ldClient.identify({key: 'someUserId'});\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### isLDReady\nYou no longer need to deal with `isLDReady`. However if you need to, it is still available in the store. You can access it via\nthe LD state like so:\n\n```javascript\nconst mapStateToProps = (state) => {\n  const {isLDReady} = state.LD; // Note: the key LD must be the same as step 2.\n\n  return {\n    isLDReady,\n  };\n};\n```\n\nThis is useful to solve \"flickering\" issues above the fold on your front page caused by a flag transitioning from a default false value\nto true.\n\n## Example\nCheck the [example](https://github.com/yusinto/ld-redux/tree/master/example) by yusinto for a fully working spa with \nreact, redux and react-router. Remember to enter your client side sdk in the client [bootstrap file](https://github.com/yusinto/ld-redux/blob/master/example/src/client/index.js) \nbefore running the example!\n\n**Please feel free to open issues and PRs!**\n\n","readmeFilename":"README.md"}