ReactJunkie

Yusinto Ngadiman
November 12, 2018·1 min read

ld-react v2 Feature Flag with Hooks

hero

This is the quickest blog ever about the quickest way to integrate launch darkly with react. Two lines of code to get feature flags into react. Courtesy of hooks. All the code here are available on github.

Install

yarn add ld-react@next

App.js

import {useLaunchDarkly} from 'ld-react';
import Home from './home';

const App = () =>
  <div>
    <Home />
 </div>;

export default () => useLaunchDarkly(App, {clientSideId: 'client-side-id'});

Note that hooks can only be used inside function components so you'll have to export a function.

Home.js

import {useFlags} from 'ld-react';

const Home = () => {
   const {devTestFlag} = useFlags(); // look ma! Flags from hooks!   return devTestFlag ? <div>Flag on</div> : <div>Flag off</div>;
};

export default Home;

It's then a single line of code useFlags() in a component somewhere to get your flags. That's it! Beautiful concise code. It's actually a lot harder to test these stuff than to use it. I'll write another post about testing hooks soon.

The old api withFlagProvider and with Flags are still available and will stay supported for backward compatibility.