unleash.unleash/website/docs/sdks/proxy-react.md

id	title
proxy-react	React proxy SDK

This library is meant to be used with the unleash-proxy. The proxy application layer will sit between your unleash instance and your client applications, and provides performance and security benefits. DO NOT TRY to connect this library directly to the unleash instance, as the datasets follow different formats because the proxy only returns evaluated toggle information.

For more detailed information, check out the React Proxy SDK on GitHub.

Installation

Install the React proxy client and the JavaScript proxy client packages:

npm install @unleash/proxy-client-react unleash-proxy-client

Initialization

The snippet below shows you how to initialize the client. We recommend that you do this in your entry point file (typically index.js/ts) to ensure that you only have one instance of it.

The configuration variables are:

• url

  Your proxy's URL.

• clientKey

  One of your proxy's designated client keys (also known as proxy secrets).

• refreshInterval

  How often (in seconds) the client should poll the proxy for updates.

• appName

  The name of your application. It's only used for identifying your application and can be whatever you want it to be.

• environment

  The environment that your application runs in. This corresponds to the environment field in the Unleash Context. Note that this is separate from the newer Environments feature.

import { FlagProvider } from '@unleash/proxy-client-react';

const config = {
  url: 'https://HOSTNAME/api/proxy',
  clientKey: 'PROXYKEY',
  refreshInterval: 15,
  appName: 'your-app-name',
  environment: 'dev',
};

ReactDOM.render(
  <React.StrictMode>
    <FlagProvider config={config}>
      <App />
    </FlagProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

How to check feature toggle states

To check if a feature is enabled:

import { useFlag } from '@unleash/proxy-client-react';

const TestComponent = () => {
  const enabled = useFlag('travel.landing');

  if (enabled) {
    return <SomeComponent />
  }
  return <AnotherComponent />
};

export default TestComponent;

To check variants:

import { useVariant } from '@unleash/proxy-client-react';

const TestComponent = () => {
  const variant = useVariant('travel.landing');

  if (variant.enabled && variant.name === "SomeComponent") {
    return <SomeComponent />
  } else if (variant.enabled && variant.name === "AnotherComponent") {
    return <AnotherComponent />
  }
  return <DefaultComponent />
};

export default TestComponent;

How to update the Unleash Context

Follow the following steps in order to update the unleash context:

import { useUnleashContext, useFlag } from '@unleash/proxy-client-react'

const MyComponent = ({ userId }) => {
  const variant = useFlag("my-toggle");
  const updateContext = useUnleashContext();

  useEffect(() => {
    // context is updated with userId
    updateContext({ userId })
  }, [])
}