https://github.com/yusinto/ld-react
Launch Darkly React integration with hooks
https://github.com/yusinto/ld-react
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
Last synced: about 1 month ago
JSON representation
Launch Darkly React integration with hooks
- Host: GitHub
- URL: https://github.com/yusinto/ld-react
- Owner: yusinto
- License: mit
- Created: 2018-05-29T23:07:12.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-12T17:40:33.000Z (over 5 years ago)
- Last Synced: 2024-10-11T13:12:17.266Z (6 months ago)
- 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
- Language: JavaScript
- Homepage:
- Size: 364 KB
- Stars: 31
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ld-react
[](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)
This package has been superseded by the official [LaunchDarkly React SDK](https://github.com/launchdarkly/react-client-sdk). Please use that instead.
> **The quickest and easiest way to integrate launch darkly with react** :tada:
Why this package?
* Easy and fast to use. Two steps to get feature flags into your react app.
* Supports subscription out of the box. You get live changes on the client as you toggle features.
* You automatically get camelCased keys as opposed to the default kebab-cased.
* No need for redux! This package uses the new context api which is available from react ^16.3.0.
## Dependency
This needs react ^16.4.0! It won't work otherwise.
## Installation
yarn add ld-react
## Quickstart
1. Wrap your root app `withFlagProvider`:
```js
import {withFlagProvider} from 'ld-react';
const App = () =>
;
export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});
```
2. Wrap your component `withFlags` to get them via props:
```js
import {withFlags} from 'ld-react';
const Home = props => {
// flags are available via props.flags
return props.flags.devTestFlag ?
Flag on : Flag off;
};
export default withFlags(Home);
```
That's it!
## API
### withFlagProvider(Component, {clientSideId, user, options})
This is a hoc which accepts a component and a config object with the above properties.
`Component` and `clientSideId` are mandatory.
For example:
```javascript
import {withFlagProvider} from 'ld-react';
const App = () =>
;
export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});
```
The `user` property is optional. You can initialise the sdk with a custom user by specifying one. This must be an object containing
at least a "key" property. If you don't specify a user object, ld-react will create a default one that looks like this:
```javascript
const defaultUser = {
key: uuid.v4(), // random guid
ip: ip.address(),
custom: {
browser: userAgentParser.getResult().browser.name,
device
}
};
```
For more info on the user object, see [here](http://docs.launchdarkly.com/docs/js-sdk-reference#section-users).
The `options` property is optional. It can be used to pass in extra options such as [Bootstrapping](https://github.com/launchdarkly/js-client#bootstrapping).
For example:
```javascript
withFlagProvider(Component, {
clientSideId,
options: {
bootstrap: 'localStorage',
},
});
```
### withFlags(Component)
This is a hoc which passes all your flags to the specified component via props. Your flags will be available
as camelCased properties under `this.props.flags`. For example:
```js
import {withFlags} from 'ld-react';
class Home extends Component {
render() {
return (
{
this.props.flags.devTestFlag ? // Look ma, feature flag!
Flag on
:
Flag off
}
);
}
}
export default withFlags(Home);
```
### ldClient
Internally the ld-react initialises the ldclient-js sdk and stores a reference to the resultant ldClient object in memory.
You can use this object to access the [official sdk methods](https://github.com/launchdarkly/js-client) directly.
For example, you can do things like:
```js
import {ldClient} from 'ld-react';
class Home extends Component {
// track goals
onAddToCard = () => ldClient.track('add to cart');
// change user context
onLoginSuccessful = () => ldClient.identify({key: 'someUserId'});
// ... other implementation
}
```
For more info on changing user context, see the [official documentation](http://docs.launchdarkly.com/docs/js-sdk-reference#section-changing-the-user-context).
## Example
Check the [example](https://github.com/yusinto/ld-react/tree/master/example) for a fully working spa with
react 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)
and create a test flag called `dev-test-flag` before running the example!