JavaScript (Web)

Getting Started

Pre-requisites

Ensure you have Node.js and npm installed.
Have access to a valid Hyphen Toggle publicKey and application details.

Installation

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

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

Integration

To integrate the Hyphen Toggle provider into your application, follow these steps:

Configure the Provider: Register the HyphenProvider with OpenFeature using your publicKey and provider options.

import { OpenFeature, ProviderEvents } from '@openfeature/web-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
};

OpenFeature.setProvider(new HyphenProvider(publicKey, options));

OpenFeature.addHandler(ProviderEvents.Ready, () => {
  createRoot(document.getElementById('root')!).render(<App />);
});

Set Up the 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: '[email protected]',
         role: 'admin',
       };
       OpenFeature.setContext({
         targetingKey: user.id,
         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);

Evaluate Feature Flags: Use the OpenFeature client to evaluate feature flags in your application.

const client = OpenFeature.getClient();
const isEnabled = client.getStringDetails('your-flag-key', 'default value');

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.