├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── example
├── .babelrc
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│ ├── client
│ │ └── index.js
│ ├── server
│ │ ├── index.js
│ │ └── server.js
│ └── universal
│ │ ├── app.js
│ │ ├── contact.js
│ │ └── home.js
├── webpack.config.client.js
├── webpack.config.server.js
└── yarn.lock
├── jest.config.js
├── lib
├── context.js
├── index.js
├── initLDClient.js
├── initUser.js
├── withFlagProvider.js
└── withFlags.js
├── package.json
├── src
├── context.js
├── index.js
├── initLDClient.js
├── initUser.js
├── withFlagProvider.js
└── withFlags.js
├── test
└── setup.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"],
3 | "plugins": [
4 | "@babel/plugin-proposal-class-properties",
5 | "@babel/plugin-transform-async-to-generator",
6 | "@babel/plugin-transform-runtime"
7 | ]
8 | }
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "parserOptions": {
4 | "allowImportExportEverywhere": true
5 | },
6 | "extends": [
7 | "airbnb",
8 | "eslint:recommended"
9 | ],
10 | "plugins": [
11 | "babel"
12 | ],
13 | "rules": {
14 | "arrow-parens": 0,
15 | "eol-last": 0,
16 | "global-require": 0,
17 | "arrow-body-style": 0,
18 | "consistent-return": 0,
19 | "no-unneeded-ternary": 0,
20 | "max-len": 0,
21 | "no-param-reassign": 2,
22 | "new-cap": 0,
23 | "no-console": 0,
24 | "object-curly-spacing": 0,
25 | "spaced-comment": 0,
26 | "import/first": 0,
27 | "import/no-extraneous-dependencies": 0,
28 | "import/prefer-default-export": 0,
29 | "import/no-mutable-exports": 0,
30 | "import/no-named-as-default": 0,
31 | "no-trailing-spaces": 0,
32 | "no-underscore-dangle": 0,
33 | "no-use-before-define": 0,
34 | "no-duplicate-imports": 0,
35 | "import/no-duplicates": 1,
36 | "no-useless-escape": 0,
37 | "no-unused-expressions": [1 , {"allowTernary": true}],
38 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
39 | "react/sort-comp": 0
40 | },
41 | "env": {
42 | "jest": true,
43 | "node": true
44 | },
45 | "globals": {
46 | "jest": true,
47 | "td": true
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # nyc test coverage
18 | .nyc_output
19 |
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 |
23 | # node-waf configuration
24 | .lock-wscript
25 |
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 |
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 |
33 | # Optional npm cache directory
34 | .npm
35 |
36 | # Optional REPL history
37 | .node_repl_history
38 |
39 | .eslintcache
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *
2 | !lib/*
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Yusinto Ngadiman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ld-react
2 |
3 | [](https://www.npmjs.com/package/ld-react) [](https://www.npmjs.com/package/ld-react) [](https://www.npmjs.com/package/ld-react) [](https://www.npmjs.com/package/ld-react)
4 |
5 | This package has been superseded by the official [LaunchDarkly React SDK](https://github.com/launchdarkly/react-client-sdk). Please use that instead.
6 |
7 | > **The quickest and easiest way to integrate launch darkly with react** :tada:
8 |
9 | Why this package?
10 | * Easy and fast to use. Two steps to get feature flags into your react app.
11 | * Supports subscription out of the box. You get live changes on the client as you toggle features.
12 | * You automatically get camelCased keys as opposed to the default kebab-cased.
13 | * No need for redux! This package uses the new context api which is available from react ^16.3.0.
14 |
15 | ## Dependency
16 |
17 | This needs react ^16.4.0! It won't work otherwise.
18 |
19 | ## Installation
20 |
21 | yarn add ld-react
22 |
23 | ## Quickstart
24 |
25 | 1. Wrap your root app `withFlagProvider`:
26 |
27 | ```js
28 | import {withFlagProvider} from 'ld-react';
29 |
30 | const App = () =>
31 |
32 |
33 |
;
34 |
35 | export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});
36 | ```
37 |
38 | 2. Wrap your component `withFlags` to get them via props:
39 |
40 | ```js
41 | import {withFlags} from 'ld-react';
42 |
43 | const Home = props => {
44 | // flags are available via props.flags
45 | return props.flags.devTestFlag ?
Flag on
:
Flag off
;
46 | };
47 |
48 | export default withFlags(Home);
49 | ```
50 |
51 | That's it!
52 |
53 | ## API
54 | ### withFlagProvider(Component, {clientSideId, user, options})
55 | This is a hoc which accepts a component and a config object with the above properties.
56 | `Component` and `clientSideId` are mandatory.
57 |
58 | For example:
59 |
60 | ```javascript
61 | import {withFlagProvider} from 'ld-react';
62 |
63 | const App = () =>
64 |
65 |
66 |
;
67 |
68 | export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});
69 | ```
70 |
71 | The `user` property is optional. You can initialise the sdk with a custom user by specifying one. This must be an object containing
72 | at least a "key" property. If you don't specify a user object, ld-react will create a default one that looks like this:
73 |
74 | ```javascript
75 | const defaultUser = {
76 | key: uuid.v4(), // random guid
77 | ip: ip.address(),
78 | custom: {
79 | browser: userAgentParser.getResult().browser.name,
80 | device
81 | }
82 | };
83 | ```
84 |
85 | For more info on the user object, see [here](http://docs.launchdarkly.com/docs/js-sdk-reference#section-users).
86 |
87 | The `options` property is optional. It can be used to pass in extra options such as [Bootstrapping](https://github.com/launchdarkly/js-client#bootstrapping).
88 | For example:
89 |
90 | ```javascript
91 | withFlagProvider(Component, {
92 | clientSideId,
93 | options: {
94 | bootstrap: 'localStorage',
95 | },
96 | });
97 | ```
98 |
99 | ### withFlags(Component)
100 | This is a hoc which passes all your flags to the specified component via props. Your flags will be available
101 | as camelCased properties under `this.props.flags`. For example:
102 |
103 | ```js
104 | import {withFlags} from 'ld-react';
105 |
106 | class Home extends Component {
107 | render() {
108 | return (
109 |