Skip to main content

React Client SDK

This is the official React client-side SDK for Flagbase. With this SDK, you can use lagbase feature flags and experiments in your React applications.

Installation​

You can install the package using npm:

$ npm install @flagbase/react-client-sdk

or yarn:

yarn add @flagbase/react-client-sdk

Usage​

  1. Import the SDK

To use the SDK, import it at the top of your file:

import FlagbaseProvider, { useFeatureFlag } from "@flagbase/react-client-sdk";
  1. Wrap your app in the FlagbaseProvider

Wrap your app with the FlagbaseProvider component to enable the SDK to communicate with the Flagbase service. Pass in the clientKey and optionally, identity and opts props:

function App() {
  return (
    <FlagbaseProvider
      clientKey="YOUR_CLIENT_SDK_KEY"
      identity={{ identifier: "USER_ID", traits: { age: 25 } }}
    >
      <MyApp />
    </FlagbaseProvider>
  );
}
  1. Use feature flags with useFeatureFlag

Use the useFeatureFlag hook to get the value of a feature flag. Pass in the flagKey and defaultVariationKey props:

function MyComponent() {
  const isFeatureEnabled = useFeatureFlag("MY_FEATURE", "control") !== "control";

  return <div>{isFeatureEnabled ? "Feature enabled!" : "Feature disabled."}</div>;
}
  1. Use the Flagbase client instance with useFlagbaseClient

Use the useFlagbaseClient hook to get access to the Flagbase client instance:

function MyComponent() {
  const flagbaseClient = useFlagbaseClient();

  // Do something with the client instance
}