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.