unleash.unleash/frontend/src/component/onboarding/dialog/snippets/react.md

1. Install the SDK

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

2. Initialize Unleash

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

const config = {
  url: '<YOUR_API_URL>',
  clientKey: '<YOUR_API_TOKEN>', // in production use environment variable
  metricsInterval: 1, // In production use interval of >15s
  appName: 'unleash-onboarding-react',
};

const root = createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <FlagProvider config={config}>
      <App />
    </FlagProvider>
  </React.StrictMode>
);

3. Check feature flag status

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

const TestComponent = () => {
  const enabled = useFlag('<YOUR_FLAG>');

  return enabled ? 'Flag is enabled' : 'Flag is disabled'
};

---

const config = {
  url: '<YOUR_API_URL>', 
  clientKey: process.env.UNLEASH_API_TOKEN,
  appName: 'unleash-onboarding-react',
};

---

• SDK repository with documentation
• React SDK example with CodeSandbox
• https://docs.getunleash.io/feature-flag-tutorials/react