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 and application options.
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', // Replace with your application name
  environment: 'production',    // Replace with the appropriate environment
};

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

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

Context

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: 'user@example.com',
       };
       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);

Feature Evaluation

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	Description
`application`	string	The application ID or alternate ID.
`environment`	string	The environment in which your application is running (e.g., `production`, `staging`).
`enableToggleUsage`	boolean	Enable or disable the logging of toggle usage (telemetry).

Context

Provide an EvaluationContext to pass contextual data for feature evaluation.

Context Fields

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