React SDK usage

This page describes how to use the OpenFeature React SDK for your client application.

About this provider

OpenFeature React SDK allows you to connect to your GO Feature Flag instance with the @openfeature/react-sdk.

If you work with React the @openfeature/react-sdk will give you a better integration with your React application. To integrate it with GO Feature Flag, you need to use the @openfeature/go-feature-flag-web-provider provider.

Install the provider

npm install @openfeature/go-feature-flag-web-provider
npm install @openfeature/web-sdk
npm install @openfeature/react-sdk
npm install @openfeature/core

How to use the provider?

OpenFeatureProvider context provider

The OpenFeatureProvider is a React context provider which represents a scope for feature flag evaluations within a React application. It binds an OpenFeature client to all evaluations within child components, and allows the use of evaluation hooks.

import { EvaluationContext, OpenFeature, OpenFeatureProvider, useFlag } from "@openfeature/react-sdk";
import { GoFeatureFlagWebProvider } from "@openfeature/go-feature-flag-web-provider";

const goFeatureFlagWebProvider = new GoFeatureFlagWebProvider({
  endpoint: "http://localhost:1031"
});

// Set the initial context for your evaluations
OpenFeature.setContext({
  targetingKey: "user-1",
  admin: false
});

// Instantiate and set our provider (be sure this only happens once)!
// Note: there's no need to await its initialization, the React SDK handles re-rendering and suspense for you!
OpenFeature.setProvider(goFeatureFlagWebProvider);

// Enclose your content in the configured provider
function App() {
  return (
    <OpenFeatureProvider>
      <Page />
    </OpenFeatureProvider>
  );
}

Evaluation hooks

Within the provider, you can use the various evaluation hooks to evaluate flags.

function Page() {
  // Use the "query-style" flag evaluation hook, specifying a flag-key and a default value.
  const { value: showNewMessage } = useFlag('new-message', true);
  return (
    <div className="App">
      <header className="App-header">
        {showNewMessage ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>}
      </header>
    </div>
  )
}

Advanced usage

You can check the OpenFeature React SDK documentation to see all the available hooks and how to use them.

Available options

Check the available options for the provider in the web provider page.

Example

If you want to see some code, you can check the example in the GO Feature Flag repository.

Contribute to the provider

You can find the source of the provider in the open-feature/js-sdk-contrib repository.