React hook for overriding and consuming feature flags
npm install use-feature !ts  !GitHub Workflow Status
- What is use-feature
- Problem
- Install
- Usage
- Props
- Overrides
``bash`
npm install use-feature`
orbash`
yarn add use-feature
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 ?
);
}
`
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
``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.
---
MIT © Feijoa Dev