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

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

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

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.

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

React

OpenFeature’s React SDK works with the web provider:

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.