React

Lets start by installing the required package for your React project.

npm install @openfeature/react-sdk @openfeature/web-sdk @openfeature/core @openfeature/ofrep-web-provider @openfeature/ofrep-core

Next, lets initialize the SDK in your project. Make sure to initialize the SDK before initializing your application. This should typically happen in the application entry file.

import { OpenFeature } from "@openfeature/react-sdk";
import { OFREPWebProvider } from "@openfeature/ofrep-web-provider";

OpenFeature.setProvider(
  new OFREPWebProvider({
    baseUrl: "{{config.baseURL}}",
    pollInterval: 60000,
    headers: [
      ["x-fflags-group", "{{config.group}}"],
      ["x-fflags-api-key", <API-KEY>], // generate api key from the group settings
    ],
  }),
);

Now you can use the OpenFeatureProvider component to wrap your application.

import { OpenFeatureProvider } from "@openfeature/react-sdk";

function App() {
  return (
    <OpenFeatureProvider>
      <YourApp />
    </OpenFeatureProvider>
  );
}

Finally, you can use the useFlag hook to access the feature flags in your components.

import { useFlag } from "@openfeature/react-sdk";

function MyComponent() {
  const { value } = useFlag("my-flag", false);
  return value ? <div>Feature is enabled</div> : <div>Feature is disabled</div>;
}