Launch Darkly React integration with hooks
This package has been superseded by the official LaunchDarkly React SDK. Please use that instead.
The quickest and easiest way to integrate launch darkly with react :tada:
Why this package?
This needs react ^16.4.0! It won't work otherwise.
yarn add ld-react
Wrap your root app withFlagProvider
:
import {withFlagProvider} from 'ld-react';
const App = () =>
<div>
<Home />
</div>;
export default withFlagProvider(App, {clientSideId: 'your-client-side-id'});
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!
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',
},
});
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);
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.
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!