npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@hyphen/openfeature-web-provider

v1.0.4

Published

The official Hyphen Toggle OpenFeature Web Provider

Downloads

349

Readme

Hyphen Toggle OpenFeature Web Provider

The Hyphen Toggle OpenFeature Web Provider allows seamless feature flag evaluation using the OpenFeature standard within the Hyphen Toggle platform.


Table of Contents

  1. Getting Started
  2. Integration
  3. Configuration
  4. Contributing
  5. License

Getting Started

Pre-requisites

  • Ensure you have Node.js and npm installed.
  • Have access to a valid Hyphen 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:

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

    Add the following setup to your application:

    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));
       
    createRoot(document.getElementById('root')!).render(<App />);
  2. 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.

     OpenFeature.setContext({
       targetingKey: user.id,
       user: user,
       customAttributes: { role: user.role }, // Additional targeting attributes
     });
    
  3. 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. |

Contributing

We welcome contributions to this project! If you'd like to contribute, please follow the guidelines outlined in CONTRIBUTING.md. Whether it's reporting issues, suggesting new features, or submitting pull requests, your help is greatly appreciated!

License

This project is licensed under the MIT License. See the LICENSE file for full details.