unleash.unleash/website/docs/reference/sdks/react.md

title
React Proxy SDK

This library can be used with the Unleash Proxy or with the Unleash front-end API. It is not compatible with the regular Unleash client API.

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 or the Unleash front-end API endpoint (<unleash-url>/api/frontend).

• 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://PROXY_HOSTNAME/api/proxy', // or https://UNLEASH_HOSTNAME/api/frontend
  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 });
  }, []);
};