React SDK

The Feato React SDK provides access to feature flags inside React applications using a simple, hook-based API.

It is designed to feel natural in React applications and integrates cleanly with component rendering and state updates.

Installation

Install the Feato React SDK using your preferred package manager.

npm install @feato/react-client

The SDK depends only on React and does not require additional runtime libraries.

Setup

Create a Feato client by providing your project key and environment. The client is typically created once and reused across the application.

import { FeatoClient } from '@feato/react-client';

const featoClient = new FeatoClient({
  projectKey: 'YOUR_PROJECT_KEY',
  environment: 'prod',
});

Wrap your application with the FeatoProvider to make feature flags available throughout the component tree.

import { FeatoProvider } from '@feato/react-client';

root.render(
  <FeatoProvider client={featoClient}>
    <App />
  </FeatoProvider>
);

Important

The provider should be placed as high as possible in the component tree, typically at the application root.

Hooks

Use hooks to read feature flags directly inside your components.

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

function Example() {
  const isEnabled = useFlag('new-dashboard');

  if (!isEnabled) {
    return null;
  }

  return <NewDashboard />;
}

Components re-render automatically when relevant flags change
No manual subscriptions or listeners
Declarative usage aligned with React rendering

Examples

Feature flags can be used to control application behavior at runtime.

Conditional rendering of UI elements
Progressive rollout of new functionality
Immediate rollback of problematic features

Use feature flags to guard behavior, not to replace application logic. Keep flag usage explicit and easy to reason about.

Next steps

After setting up the React SDK, you may want to explore related topics: