Hyphen
Log In

React

Integrate Hyphen's feature flag service into your React applications with the official React SDK. This guide covers installation, authentication, initialization, and usage with the useToggle hook.

The @hyphen/react-sdk is Hyphen's native React SDK. It provides a provider component and hooks for evaluating Toggle feature flags in React applications.

Table of Contents

Installation

npm install @hyphen/react-sdk

Authentication

The SDK authenticates with your project public key (it starts with public_) and your application id. See Get a Project's Public Key for where to find these in the Hyphen dashboard.

Initialization

Wrap your application in the ToggleProvider:

import { ToggleProvider } from '@hyphen/react-sdk';
import App from './App';

function Root() {
  return (
    <ToggleProvider
      publicApiKey="public_..."
      applicationId="my-app"
      environment="production"
      defaultContext={{
        user: {
          id: 'user-123',
          email: 'user@example.com',
        },
      }}
    >
      <App />
    ToggleProvider>
  );
}

Usage

Read flags anywhere inside the provider with the useToggle hook:

import { useToggle } from '@hyphen/react-sdk';

function MyComponent() {
  const toggle = useToggle();
  const isNewFeatureEnabled = toggle.getBoolean('new-feature', false);

  return <div>{isNewFeatureEnabled && <NewFeature />}div>;
}

See also