---
title: "Quickstart: browser and React"
description: "Evaluate client-side flags in a web page or a React app with a client key."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.ezghcloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart: browser and React

Web pages evaluate flags with a **client key**, which is publishable: it sees only flags marked
client-side, and the rules stay on EZGH's servers.

## 1. A client-side flag and a client key

```sh
ezgh flags create new-checkout --name "New checkout" --client-side
ezgh flags toggle new-checkout --env production --on
ezgh flags keys create --env production --kind client --name storefront
```

An existing flag becomes client-side with `ezgh flags update new-checkout --client-side=true`, or
in its **Settings** tab in the console.

## 2. Install

```sh
npm install @openfeature/web-sdk github:ezgamehost/flags-provider-ts#v0.1.0
```

For React, also install `@openfeature/react-sdk`.

## 3. Evaluate in the browser

```ts
import { OpenFeature } from "@openfeature/web-sdk"
import { EzghWebProvider } from "@ezgh/flags-openfeature/web"

await OpenFeature.setContext({ targetingKey: user.id, plan: user.plan })
await OpenFeature.setProviderAndWait(new EzghWebProvider({ clientKey: "ezgh_fc_…" }))

const enabled = OpenFeature.getClient().getBooleanValue("new-checkout", false)
```

The web provider evaluates every client-side flag for the context in one request when it starts
and whenever the context changes (`OpenFeature.setContext`), then answers evaluations from those
results, synchronously. It refreshes them when the page becomes visible again and every 5
minutes. It stores nothing in the browser.

**Live updates** are opt-in: with `live: true` the provider keeps a connection open and
re-evaluates as soon as a client-side flag changes, emitting `PROVIDER_CONFIGURATION_CHANGED`.

```ts
new EzghWebProvider({ clientKey: "ezgh_fc_…", live: true })
```

## React

OpenFeature's React SDK works with the web provider:

```tsx
import { OpenFeature, OpenFeatureProvider, useBooleanFlagValue } from "@openfeature/react-sdk"
import { EzghWebProvider } from "@ezgh/flags-openfeature/web"

OpenFeature.setProvider(new EzghWebProvider({ clientKey: "ezgh_fc_…" }))

export function App() {
  return (
    <OpenFeatureProvider>
      <Checkout />
    </OpenFeatureProvider>
  )
}

function Checkout() {
  const newCheckout = useBooleanFlagValue("new-checkout", false)
  return newCheckout ? <NewCheckout /> : <Cart />
}
```

Set the user's context with `OpenFeature.setContext` when they sign in; components re-render with
the new values.

Source: https://docs.ezghcloud.com/flags/quickstart-browser-react/index.mdx