React

Installation

To use the Hyphen Toggle OpenFeature Web Provider for React, install the required packages:

npm install @openfeature/react-sdk @hyphen/openfeature-web-provider

Setup and Initialization

To begin using the Hyphen Provider, follow these steps:

Import the required modules.
Configure the provider with your publicKey, application name and environment.
You can specify the environment in one of two formats:
- Alternate ID (e.g., "production", "staging") — the environment in which your application is running.
- Project Environment ID (e.g., pevr_abc123) — useful for internal references.
Register the OpenFeature provider.

import { OpenFeature, OpenFeatureProvider } from '@openfeature/react-sdk';
import { HyphenProvider, HyphenProviderOptions } from '@hyphen/openfeature-web-provider';

const publicKey = 'your-public-key'; // Replace with your Hyphen publicKey

const options: HyphenProviderOptions = {
  application: 'your-app-name',
  environment: 'production', // or project environment ID
};

await OpenFeature.setProviderAndWait(new HyphenProvider(publicKey, options));

function App() {
  return (
    <OpenFeatureProvider>
      <Page/>
    </OpenFeatureProvider>
  );
}

Use OpenFeature.setContext to configure the context needed for feature targeting. This context should include relevant user information, typically obtained from an authentication process.

const AuthContext = createContext({ isLoading: true, user: null });

export const MockAuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [authState, setAuthState] = useState({ isLoading: true, user: null });

   useEffect(() => {
     setTimeout(() => {
       const user = {
         id: 'user-123',
         name: 'John Doe',
         email: '[email protected]',
       };
       OpenFeature.setContext({
         targetingKey: user.id,
         user,
         customAttributes: { role: user.role }, // Additional targeting attributes
       });

      setAuthState({ isLoading: false, user });
       }, 1000);
   }, []);

   return <AuthContext.Provider value={authState}>{children}</AuthContext.Provider>;
   };

   export const useAuth = () => useContext(AuthContext);

Usage

Evaluation Context Example

Use any of the OpenFeature evaluation hooks to evaluate flags.

import { useFlag } from '@openfeature/react-sdk';

function Page() {
const { value: isFeatureEnabled } = useFlag('your-flag-key', false);
  return (
    <div>
      <header>
        {isFeatureEnabled ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>}
      </header>
    </div>
  )
}

Configuration

Options

Option	Type	Required	Description
`application`	`string`	Yes	The application id or alternate ID.
`environment`	`string`	Yes	The environment identifier for the Hyphen project (project environment ID or alternateId).
`horizonUrls`	`string[]`	No	Hyphen Horizon URLs for fetching flags.
`enableToggleUsage`	`boolean`	No	Enable/disable telemetry (default: true).

Context

Provide an EvaluationContext to pass contextual data for feature evaluation.

Field	Type	Required	Description
`targetingKey`	`string`	Yes	The key used for caching the evaluation response.
`ipAddress`	`string`	No	The IP address of the user making the request.
`customAttributes`	`Record<string, any>`	No	Custom attributes for additional contextual information.
`user`	`object`	No	An object containing user-specific information for the evaluation.
`user.id`	`string`	No	The unique identifier of the user.
`user.email`	`string`	No	The email address of the user.
`user.name`	`string`	No	The name of the user.
`user.customAttributes`	`Record<string, any>`	No	Custom attributes specific to the user.