> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/openfeature-providers/react-sdk.md).

# OpenFeature Provider for React

Integrate your React applications with Harness FME using the React OpenFeature Provider, a standardized, vendor-agnostic feature flagging API. This provider implements the OpenFeature specification and bridges the OpenFeature SDK with the Harness FME Browser SDK.

This page walks you through installing, configuring, and using the React OpenFeature provider to evaluate feature flags in your React applications.

### Before you begin <a href="#before-you-begin" id="before-you-begin"></a>

Before you begin, ensure you have the following:

* A valid [Harness FME SDK key](/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components.md#api-keys) for your application
* An React 17+ application using evaluation hooks
* Access to your application's `package.json` file to add the provider dependency

### Version compatibility <a href="#version-compatibility" id="version-compatibility"></a>

| Component                                       | Minimum Version |
| ----------------------------------------------- | --------------- |
| React                                           | ≥ 17            |
| `@splitsoftware/openfeature-web-split-provider` | ≥ 1.0.0         |
| Harness FME Browser SDK                         | ≥ 10.x          |
| OpenFeature React SDK                           | ≥ 0.1.0         |

### Install the provider and dependencies <a href="#install-the-provider-and-dependencies" id="install-the-provider-and-dependencies"></a>

Add the Harness FME OpenFeature provider dependency to your application's `package.json` file.

```bash
npm i @openfeature/react-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-provider
```

### Initialize the provider <a href="#initialize-the-provider" id="initialize-the-provider"></a>

The Harness FME OpenFeature provider requires your Harness FME Browser SDK key and a targeting key.

```typescript
import { OpenFeature } from '@openfeature/react-sdk';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';
import { DebugLogger, SplitFactory } from '@splitsoftware/splitio-browserjs';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: '<YOUR_CLIENT_SIDE_SDK_KEY>',
    key: 'TARGETING_KEY'
  }
})
const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory);

OpenFeature.setProvider(openFeatureProvider);

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

### Evaluate feature flags using evaluation hooks <a href="#evaluate-feature-flags-using-evaluation-hooks" id="evaluate-feature-flags-using-evaluation-hooks"></a>

Specify the feature flag key and a default value in `useFlag` so your application has a predictable fallback while the flag value loads.

```typescript
import { useFlag } from '@openfeature/react-sdk';

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>
  )
}
```

For more information, go to the [Harness FME Web OpenFeature Provider GitHub repository](https://github.com/splitio/split-openfeature-provider-web-js?tab=readme-ov-file#react-usage).