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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ff00ff/boolean-react

v0.7.0

Published

Boolean's react client library to make it easy to start using feature flags

Downloads

13

Readme

🎚 Boolean

Build Status Coverage Status License Badge

Feature management for modern devops teams by Boolean.

npm i @ff00ff/boolean-react

Features

  • Percentage-based rollout
  • User targeting & segmentation
  • Turn off features instantly
  • Audit log
  • SSO / SAML

⚠️ Create an account at Boolean. We have different plans available for different teams including a free trial.


Quick start

Use the useBoolean(..) hook to easily get the value of your feature flag.

function MyComponent() {
  const { isEnabled } = useBoolean(`my-feature`);

  if (isEnabled) {
    // Return you enhanced feature.
  }

  // Return your regular feature.
}

And add the BooleanProvider in the root of your component tree (so the hooks receive the data via the new context api).

⚠️ Copy the api key from the Boolean site under the API Keys menu item.

<BooleanProvider apiKey={process.env.BOOLEAN_API_KEY}>
  {/* Your component tree here */}
</BooleanProvider>

Important

  • We use the WebSocket api. Configure a polyfill if you're targeting older browsers. https://www.caniuse.com/#search=websocket
  • If WebSockets are not available, or the connection cannot be established, we use the standard fetch API to make networks requests. It's not supported in all browsers yet. Use a polyfill if you wish to support these browsers (and you're not polyfilling this yet). If you do not configure a polyfill, the library will not fall back to http requests.
  • In addition, this library also uses the standard AbortController which may also require a polyfill.
  • The client optionally caches data using localforage. If possible, unlike plain localStorage, localforage does async storage to avoid blocking the main render loop. If localforage is not available the client does not cache data.

📄 Seeing logs? Don't worry. The client library logs errors and warnings only when NODE_ENV is not set to production.

Subjects & Advanced Targetting

You can optionally pass a subjectId and/or subjectData to the useBoolean(..) hook. These properties are used to determine which feature flags are enabled for the current subject by looking at the configured percentage on the different segments.

⚠️ A subjectId may be the currently signed in user id. But it could also be a project's id or group of user ids. Two users chatting with eachother or colleague's working in the same project probably want to see the same features.

function MyComponent({ user }) {
  const { isEnabled } = useBoolean(`my-feature`, user.id, {
    email: user.email,
  });

  if (isEnabled) {
    // Return you enhanced feature.
  }

  // Return your regular feature.
}

⚠️ If you configured a percentage on your feature flag, you must pass in a subjectId or the feature flag will be disabled by default. You can always generate and store a random subjectId for anonymous users.

In Boolean's admin panel you can manage your segments. For example: create an Internal Users segment with a rule email ENDS_WITH @useboolean.com. When your feature flag includes this segment it will only be enabled to internal users.

Pass more properties so you have more targetting options in your segments: days since acquisition; time zone; network connection; profile data; etc.

The segments and their rules are evaluated locally: so Boolean does not consume your users' data. This is by design to protect the privacy of your users.

Loading

When BooleanProvider mounts it immediately loads Boolean's data. But it's possible to call useBoolean() before any data is loaded. By default, features will be turned off if no data has been loaded yet. As soon as data will be available the feature will be flipped accordingly.

To change this behaviour you can check the isLoading state of Boolean. For returning visitors, it's advised to cache previous data so it's available immediately. To enable caching, simply install the localforage module.

Below an example to check the loading state of my-feature and enable the feature if data is still loading.

function MyComponent() {
  const { isLoading, isEnabled } = useBoolean(`my-feature`);

  if (isLoading || isEnabled) {
    // Return you enhanced feature.
  }

  // Return your regular feature.
}

📨 If you have any feedback or just want to say hi you can send us a ping. Over & out!