ld-react

    1.2.0 • Public • Published

    ld-react

    npm version npm downloads npm npm

    The quickest and easiest way to integrate launch darkly with react 🎉

    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:

      import {withFlagProvider} from 'ld-react';
       
      const App = () =>
        <div>
          <Home />
       </div>;
       
      export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});
    2. Wrap your component withFlags to get them via props:

      import {withFlags} from 'ld-react';
       
      const Home = props => {
         // flags are available via props.flags
         return props.flags.devTestFlag ? <div>Flag on</div> : <div>Flag off</div>;
      };
       
      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:

    import {withFlagProvider} from 'ld-react';
     
    const App = () =>
      <div>
        <Home />
     </div>;
     
    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:

    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.

    The options property is optional. It can be used to pass in extra options such as Bootstrapping. For example:

    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:

    import {withFlags} from 'ld-react';
     
    class Home extends Component {
      render() {
        return (
          <div>
            {
              this.props.flags.devTestFlag ? // Look ma, feature flag!
                <div>Flag on</div>
                :
                <div>Flag off</div>
            }
          </div>
        );
      }
    }
     
    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 directly. For example, you can do things like:

    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.

    Example

    Check the example for a fully working spa with react and react-router. Remember to enter your client side sdk in the client root app file and create a test flag called dev-test-flag before running the example!

    Install

    npm i ld-react

    DownloadsWeekly Downloads

    190

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    17.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • yusinto