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: 3 months 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 (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-11-12T17:40:33.000Z (over 4 years ago)
• Last Synced: 2024-03-22T08:50:16.827Z (3 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: 32
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-launchdarkly - yusinto/ld-react

README

        
# ld-react

[![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)

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!