Javascript (Web)

The Hyphen Toggle Provider for Javascript is an OpenFeature provider implementation that enables seamless feature flag evaluation. This section covers setup, usage, and configuration specific to the JavaScript implementation.

Installation

Install the provider and the OpenFeature server SDK:

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

Setup and Initialization

To begin using the Hyphen Provider, follow these steps:

  1. Import the required modules.

  2. Configure the provider with your publicKey , application 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.

  3. Register the provider with OpenFeature.

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

const publicKey = "your-public-key-here";

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

await OpenFeature.setProviderAndWait(new HyphenProvider(publicKey, options));
  1. Use OpenFeature.setContext to configure the required context for feature targeting evaluations, incorporating user or application context.
const context: HyphenEvaluationContext = {  
  targetingKey: 'user-123',  
  ipAddress: '203.0.113.42',  
  customAttributes: {  
    subscriptionLevel: 'premium',  
    region: 'us-east',  
  },  
  user: {  
    id: 'user-123',  
    email: '[email protected]',  
    name: 'John Doe',  
    customAttributes: {  
      role: 'admin',  
    },  
  },  
};

OpenFeature.setContext(context);

Usage

Evaluation Context Example

Use the OpenFeature.getClient() to evaluate feature flags in your application.

const client = OpenFeature.getClient();
const isEnabled = client.getBooleanDetails('your-flag-key', false);
console.log('isEnabled', isEnabled) // true or false

Configuration

Options

OptionTypeRequiredDescription
applicationstringYesThe application id or alternate ID.
environmentstringYesThe environment identifier for the Hyphen project (project environment ID or alternateId).
horizonUrlsstring[]NoHyphen Horizon URLs for fetching flags.
enableToggleUsagebooleanNoEnable/disable telemetry (default: true).

Context

Provide an EvaluationContext to pass contextual data for feature evaluation.

FieldTypeRequiredDescription
targetingKeystringYesThe key used for caching the evaluation response.
ipAddressstringNoThe IP address of the user making the request.
customAttributesRecord<string, any>NoCustom attributes for additional contextual information.
userobjectNoAn object containing user-specific information for the evaluation.
user.idstringNoThe unique identifier of the user.
user.emailstringNoThe email address of the user.
user.namestringNoThe name of the user.
user.customAttributesRecord<string, any>NoCustom attributes specific to the user.