React

Installation

Add the OpenFeature SDK and the Tggl Provider to your project:

npm i @openfeature/react-sdk openfeature-web-tggl-provider

Quick start

Register the TgglWebProvider and wrap your app in an <OpenFeatureProvider />:

import { OpenFeatureProvider, OpenFeature } from '@openfeature/react-sdk';
import { TgglWebProvider } from 'openfeature-web-tggl-provider'
 
OpenFeature.setProvider(new TgglWebProvider('API_KEY'))
 
function App() {
  return (
    <OpenFeatureProvider>
      {/*...*/}
    </OpenFeatureProvider>
  );
}

You can now use the useFlag hook anywhere in your app to access flag values:

import { useBooleanFlagValue } from '@openfeature/react-sdk';
 
function MyComponent() {
  const value = useBooleanFlagValue('my-feature', false);
 
  //...
}

Getting a flag's value

There are four hooks to get a flag's value: useBooleanFlagValue, useNumberFlagValue, useStringFlagValue, and useObjectFlagValue. Each hook takes the flag's key as the first argument, a default value as the second argument.

import { useBooleanFlagValue, useNumberFlagValue, useStringFlagValue, useObjectFlagValue } from '@openfeature/react-sdk';
 
function MyComponent() {
  const value = useBooleanFlagValue('feat-a', true)
  const value = useNumberFlagValue('feat-b', 42)
  const value = useStringFlagValue('feat-c', 'foo');
  const value = useObjectFlagValue('feat-d', { custom: 'object' })
 
  //...
}

The default value must be specified and will be returned if the flag is not found or if an error occurs.

Managing the context

You can set up the initial context when calling setProvider which will fetch all active flags for that context using the API:

OpenFeature.setProvider(new TgglWebProvider('API_KEY'), {
  userId: 'foo',
  country: 'FR',
  //...
})

If omitted, the context will default to an empty object. You can also update the context at any time to react to changes in your app:

await OpenFeature.setContext({
  userId: 'bar',
  country: 'UK',
  //...
});

setContext is async and will return a promise that resolves once the flags for that new context have been fetched from the API. All your components will be re-rendered with the new flag values.

Usually, you can call setContext in a useEffect hook without necessarily awaiting the result:

const MyComponent = () => {
  const { user } = useAuth()
 
  useEffect(() => {
    if (user) {
      OpenFeature.setContext({ userId: user.id, email: user.email });
    } else {
      OpenFeature.setContext({ userId: null, email: null });
    }
  }, [user])
 
  return <></>
}

Polling for "live" updates

If you need your client to be up-to-date with the latest flag configuration, you can enable polling:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  pollingInterval: 5000
}))

Here, the provider will poll the Tggl API every 5 seconds for updates. If one of the flag changes, any component that uses this flag will be re-rendered with the new value.

Using the Proxy

By default, the Provider talks directly to the Tggl API. If you are using the Tggl Proxy, you can specify the proxy URL when instantiating the provider:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  baseUrl: 'http://your-proxy-domain.com'
}))

The /flags and /report path will be appended to the baseUrl and both flags evaluation and reporting will go through the proxy. If your proxy is configured with custom paths, you can specify them:

OpenFeature.setProvider(new TgglWebProvider('API_KEY', {
  url: 'http://your-proxy-domain.com/custom-flags',
  reporting: {
    url: 'http://your-proxy-domain.com/custom-report'
  }
}))

Going further

Read the official OpenFeature SDK documentation for more information on how to use the SDK.

You can also have a look at Tggl's Node.js SDK documentation that is used under the hood by the TgglWebProvider.