🛠️Using Launchbees React SDK
Ensure your app takes flight without any stings attached 🐝
Installation & Setup
Installation is a one-time process and should only take 15 minutes.
Summary
Pre-requisites:
React App
Launchbees Account
Environment Key (Can be obtained here: link )
Access to launchbees sdk repo (please mail [email protected] if not already provided)
Steps
Install React SDK
Configure App to use Launchbees
Identify LoggedIn user’s traits (Organization)
Guide
Install React SDK
npm i git+ssh://[email protected]:Radien-Design/launchbees-js-sdk.git
Configure App to use Launchbees
Wrap in Launchbees Provider
import launchbees from 'launchbees-js-sdk'
import { LaunchbeesProvider } from 'launchbees-js-sdk/dist/react'
return (
<LaunchbeesProvider launchbees={launchbees} config={{
enviromentKey: "63027139841c88acdaf51a40.3b05af8c1939e5312488f268",
endpoint: "https://api.launchbees.com/sdk/v1/users"
}}>
--
</LaunchbeesProvider>
);
Identify LoggedIn user’s traits (Organization)
To be done when login state changes like login and page reload.
useEffect(() => {
launchbees.identify({organizationId: "8623456", organizationName: "Razorpay"})
}, [user])
Using Flags (in less than 2 mins)
Using feature flags is done during the development of any new feature or can be added at the old feature which you want to control using flags.
Pre-requisites:
Feature Key
Create feature here if not already created
Key can be copied from here: https://app.launchbees.com/
Use Cases
Hiding / Showing based on flag
Disabling Buttons
Switching component based on flag
You would need to use hook useFlags
that can be imported from sdk.
import { useFlags } from 'launchbees-js-sdk/dist/react';
Accessing isEnabled
for a feature
isEnabled
for a featureTo access whether a feature flag is enabled or disabled, you can use the useFlags
hook and pass in an array with the feature key.
function HomePage() {
const flags = useFlags(["feature_key"])
// use flags.feature_key.isEnabled to see if feature is enabled
}
Using Flag to hide/show
To hide or show content based on a feature flag, you can use the isEnabled
property from the useFlags
hook.
function HomePage() {
const flags = useFlags(["home_page_description"])
return (
<div>
{flags.home_page_description.isEnabled && (
<p>This content will only be displayed if the feature flag is enabled.</p>
)}
</div>
)
}
Disabling Buttons
To disable a button based on a feature flag, you can use the isEnabled
property from the useFlags
hook.
function HomePage() {
const flags = useFlags(["button_enabled"])
return (
<div>
<button disabled={!flags.button_enabled.isEnabled}>Click me</button>
</div>
)
}
Using Flag to switch component
To switch a component based on a feature flag, you can use the isEnabled
property from the useFlags
hook to conditionally render a component.
function HomePage() {
const flags = useFlags(["new_feature"])
return (
<div>
{flags.new_feature.isEnabled ? (
<NewFeatureComponent />
) : (
<OldFeatureComponent />
)}
</div>
)
}
Last updated