The @hyphen/browser-sdk is Hyphen's native client-side JavaScript SDK for web browsers. It provides a lightweight, optimized solution for feature flag evaluation in browser environments without requiring OpenFeature.

Table of Contents

• • Installation
  • Setup and Initialization
  • Usage
    • Basic Feature Flag Evaluation
    • Real-time Flag Updates
    • Getting Feature Flag Details
    • User Context
    • Browser-Specific Features
  • Configuration Options
• Open Feature
  • Installation
  • Setup and Initialization
  • Usage
    • Evaluation Context Example
  • Configuration
    • Options
    • Context

Installation

Install the native browser SDK:

npm install @hyphen/browser-sdk

Or include via CDN:

<script src="https://unpkg.com/@hyphen/browser-sdk@latest/dist/browser.min.js">script>

Setup and Initialization

Initialize the Hyphen browser client with your client key and configuration:

import { HyphenBrowserClient } from '@hyphen/browser-sdk';

const client = new HyphenBrowserClient({
  apiKey: 'your-client-key',
  application: 'your-application-name',
  environment: 'production' // or project environment ID
});

await client.initialize();

Usage

Basic Feature Flag Evaluation

Check if a feature is enabled for the current user:

const isEnabled = await client.isEnabled('new-ui-design', {
  userId: user.id,
  email: user.email
});

if (isEnabled) {
  // Show new UI
  renderNewUI();
} else {
  // Show legacy UI
  renderLegacyUI();
}

Real-time Flag Updates

Listen for feature flag changes in real-time:

client.on('flagsChanged', (flags) => {
  console.log('Feature flags updated:', flags);
  updateUIBasedOnFlags(flags);
});

Getting Feature Flag Details

Retrieve detailed information about a feature flag evaluation:

const flagDetails = await client.getFlagDetails('beta-features', {
  userId: user.id,
  customAttributes: {
    accountType: 'premium',
    region: 'us-west'
  }
});

console.log(flagDetails.enabled); // true or false
console.log(flagDetails.variant); // variant name if applicable

User Context

Provide user context for targeted feature rollouts:

const context = {
  userId: 'user-789',
  email: '[email protected]',
  name: 'John Doe',
  customAttributes: {
    accountType: 'enterprise',
    betaTester: true,
    region: 'eu-west'
  }
};

const showBetaFeatures = await client.isEnabled('beta-dashboard', context);

Browser-Specific Features

The browser SDK automatically captures browser context:

// SDK automatically includes:
// - User agent
// - Screen resolution
// - Browser language
// - Timezone

const isEnabled = await client.isEnabled('mobile-optimized-view', {
  userId: user.id
});

Configuration Options

Open Feature

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));

4. 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

Context

Provide an EvaluationContext to pass contextual data for feature evaluation.