use-feature

 !ts  !GitHub Workflow Status

- 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

``bash
npm install use-feature
`
or
`bash
yarn add use-feature
`

Usage

$3

To use the useFeature hook:

`tsx
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 ? : null
);
}
`

$3


To use the Feature component:
`tsx
import { Feature } from "use-feature";

const Example = () => {
return (



);
}
`

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

$3

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

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

$3

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

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

$3

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

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

Environment Variables
`sh
#.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
``

$3

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