# Using ConfigCat's OpenFeature Provider in React

Copy page

## Getting started[​](#getting-started "Direct link to Getting started")

OpenFeature offers a [React SDK](https://github.com/open-feature/js-sdk/tree/main/packages/react) to streamline the use of OpenFeature in React applications. This SDK is built on top of the [OpenFeature JavaScript Web SDK](https://github.com/open-feature/js-sdk/blob/main/packages/web).

Since ConfigCat implements [a provider](https://configcat.com/docs/sdk-reference/openfeature/js.md) for the Web SDK, you can use ConfigCat with the OpenFeature React SDK, as explained below.

### 1. Install the React SDK and the ConfigCat provider[​](#1-install-the-react-sdk-and-the-configcat-provider "Direct link to 1. Install the React SDK and the ConfigCat provider")

```bash
npm i @openfeature/react-sdk @openfeature/config-cat-web-provider

```

### 2. Initialize the React SDK[​](#2-initialize-the-react-sdk "Direct link to 2. Initialize the React SDK")

The `ConfigCatWebProvider.create()` function takes the SDK key and an optional `options` argument containing additional configuration options for the underlying [ConfigCat client](https://configcat.com/docs/sdk-reference/js/browser.md#creating-the-configcat-client):

```jsx
import { OpenFeature, OpenFeatureProvider } from '@openfeature/react-sdk';
import { ConfigCatWebProvider } from '@openfeature/config-cat-web-provider';
import { createConsoleLogger, LogLevel } from '@configcat/sdk';

const configCatProvider = ConfigCatWebProvider.create('#YOUR-SDK-KEY#', {
  // Specify options for the underlying ConfigCat client
  logger: createConsoleLogger(LogLevel.Info),
  setupHooks: (hooks) => hooks.on('clientReady', () => console.log('Client is ready!')),
  // ...
});

// 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(configCatProvider);

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

```

The `OpenFeatureProvider` is a [React context provider](https://react.dev/reference/react/createContext#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.

### 3. Use your feature flag[​](#3-use-your-feature-flag "Direct link to 3. Use your feature flag")

```jsx
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: isAwesomeFeatureEnabled } = useFlag('isAwesomeFeatureEnabled', false);
  return (
    <div>
      {isAwesomeFeatureEnabled ? <p>Awesome feature is enabled!</p> : <p>Awesome feature is not enabled.</p>}
    </div>
  )
}

```

## Evaluation Context[​](#evaluation-context "Direct link to Evaluation Context")

An [evaluation context](https://openfeature.dev/docs/reference/concepts/evaluation-context) in the OpenFeature specification is a container for arbitrary contextual data that can be used as a basis for feature flag evaluation.

You can find [here](https://configcat.com/docs/sdk-reference/openfeature/js.md#evaluation-context) how the ConfigCat provider translates these evaluation contexts to ConfigCat [User Objects](https://configcat.com/docs/sdk-reference/js/browser.md#user-object).

## Advanced features[​](#advanced-features "Direct link to Advanced features")

Read the documentation of the [OpenFeature React SDK](https://openfeature.dev/docs/reference/technologies/client/web/react) to learn more about the advanced capabilities of the SDK.

## Look under the hood[​](#look-under-the-hood "Direct link to Look under the hood")

* [ConfigCat OpenFeature Provider's repository on GitHub](https://github.com/open-feature/js-sdk-contrib/tree/main/libs/providers/config-cat-web)
* [ConfigCat OpenFeature Provider in NPM](https://www.npmjs.com/package/@openfeature/config-cat-web-provider)