🛠️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 [e-mail] 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://[e-mail]: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

To 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>
  )
}