ld-react v1.2.0
ld-react
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.
- Uses hooks and context api under the hood. No redux required.
- 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.
Installation
yarn add ld-react
Quickstart
Call
useLaunchDarkly
hook with your App:import {useLaunchDarkly} from 'ld-react'; const App = () => <div> <Home /> </div>; export default () => useLaunchDarkly(App, {clientSideId: 'your-client-side-id'});
useFlags
in your component to get flags:import {useFlags} from 'ld-react'; const Home = () => { const {devTestFlag} = useFlags(); return devTestFlag ? <div>Flag on</div> : <div>Flag off</div>; }; export default Home;
That's it!
API
useLaunchDarkly(Component, {clientSideId, user, options})
This is a custom hook which accepts a component and a config object with the above properties.
Component
and clientSideId
are mandatory.
For example:
import {useLaunchDarkly} from 'ld-react';
const App = () =>
<div>
<Home />
</div>;
// GOTCHA: export a function because hooks can only be used inside function components
export default () => useLaunchDarkly(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:
useLaunchDarkly(Component, {
clientSideId,
options: {
bootstrap: 'localStorage',
},
});
useFlags()
This is a custom hook which returns an object containing all your flags. Your flags will be available as camelCased properties. For example:
import {useFlags} from 'ld-react';
const Home = () => {
const {devTestFlag} = useFlags();
return devTestFlag ? <div>Flag on</div> : <div>Flag off</div>;
};
export default 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 own client side sdk in useLaunchDarkly hook
and create a test flag called dev-test-flag
before running the example!
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago