use-feature

• What is use-feature
• Problem
• Install
• Usage
• Props
• Overrides

What is use-feature?

A comprehensive, lightweight, feature flag hook for React. It provides an easy way to read and override flags so anybody (including non-technical users) can toggle features in their own browser.

Install

npm install use-feature

or

yarn add use-feature

Usage

Hook

To use the useFeature hook:

import { useFeature } from "use-feature";

const Example = () => {
  const showFeature = useFeature("MY_FEATURE"); // either pass a boolean as a second value or set an environment variable `MY_FEATURE=true`

  return (
    showFeature ? <MyFeature /> : null
  );
}

Component

To use the Feature component:

import { Feature } from "use-feature";

const Example = () => {
  return (
    <Feature name="MY_FEATURE">
      <MyFeature />
    <Feature>
  );
}

Props

| Prop | Type | Description | Required | default Value | | ------------ | ----------- | ------------------------------------------------------- | ---------| ---------| | name | string | Name of your feature flag (used for overrides and for checking env var value) | true | N/A | | enabled | boolean | true = show, false = hide | false | false |

Note: The feature flag is defaulted to false, but using any of the following methods, it will toggle the flag:

1. Setting a true/false value as the second argument to the useFeature hook.
2. Looking for an environment variable, query string, local storage, or cookie with the same name as the feature flag.

Overrides

Sometimes it's useful for some users to be able override feature flags on their local browser. This is particularly useful if you want a feature disabled for the public but need to enable it for a one person to test. E.g. for the QA tester or a product owner etc.

This can be done either via a query string, local storage value, or setting a cookie.

NOTE: query string or cookie keys and local storage keys must match the name prop

Query string

 // enable
 https://example.com?MY_FEATURE=true

 // disable
 https://example.com?MY_FEATURE=false

Local Storage

// enable
localStorage.setItem('MY_FEATURE', 'true');

// disable
localStorage.setItem('MY_FEATURE', 'false');

Cookie

// enable
document.cookie = 'MY_FEATURE=true;'

// disable
document.cookie = 'MY_FEATURE=false;'

Environment Variables

#.env
MY_FEATURE=true
# or if you're using create react app
REACT_APP_MY_FEATURE=true
# or if you're using Gatsby
GATSBY_MY_FEATURE=true
# or if you're using Next
NEXT_PUBLIC_MY_FEATURE=true

Support

The library supports Typescript and works on both client side rendered apps such as create-react-app as well as isomorphic apps like Gatsby and Nextjs.

This package was originally @feijoa/react but has been migrated here.

License

MIT © Feijoa Dev