Skip to content

React SDK

Installation

pnpm add @flags-gg/react-library

npm install @flags-gg/react-library

yarn add @flags-gg/react-library

Quick Start

Wrap your app with FlagsProvider:

import { FlagsProvider } from "@flags-gg/react-library";

const App = () => {
  return (
    <FlagsProvider options={{
      projectId: "YOUR_PROJECT_ID",
      agentId: "YOUR_AGENT_ID",
      environmentId: "YOUR_ENVIRONMENT_ID",
    }}>
      <YourApp />
    </FlagsProvider>
  );
};

Then check flags anywhere in your component tree:

import { useFlags } from "@flags-gg/react-library";

const MyComponent = () => {
  const { is } = useFlags();

  return (
    <div>
      {is("intro")?.enabled() && <div>Show intro</div>}
    </div>
  );
};

Local Flags

You can create flags that exist only in the browser, without defining them in the dashboard:

import { useFlags } from "@flags-gg/react-library";

const MyComponent = () => {
  const { is } = useFlags();

  is("offlineFlag").initalize(false);

  return (
    <div>
      {is("offlineFlag")?.enabled() && <div>Show offline content</div>}
    </div>
  );
};

Local flags can be toggled at runtime using the secret menu.

Next Steps