Gathering detailed insights and metrics for flagged
Gathering detailed insights and metrics for flagged
Gathering detailed insights and metrics for flagged
Gathering detailed insights and metrics for flagged
flagged-respawn
A tool for respawning node binaries when special flags are present.
@types/flagged-respawn
TypeScript definitions for flagged-respawn
@lrnwebcomponents/paper-input-flagged
Automated conversion of paper-input-flagged/
@haxtheweb/paper-input-flagged
Automated conversion of paper-input-flagged/
npm install flagged
Typescript
Module System
Min. Node Version
Node Version
NPM Version
91.9
Supply Chain
100
Quality
76.9
Maintenance
100
Vulnerability
100
License
TypeScript (83.42%)
JavaScript (14.42%)
HTML (2.16%)
Total Downloads
4,799,209
Last Day
519
Last Week
20,691
Last Month
108,331
Last Year
1,667,699
419 Stars
615 Commits
21 Forks
4 Watching
10 Branches
3 Contributors
Minified
Minified + Gzipped
Latest Version
3.0.0
Package Id
flagged@3.0.0
Unpacked Size
11.14 kB
Size
3.98 kB
File Count
5
NPM Version
10.2.4
Node Version
20.11.1
Publised On
21 Mar 2024
Cumulative downloads
Total Downloads
Last day
-91.2%
519
Compared to previous day
Last week
-24.9%
20,691
Compared to previous week
Last month
-8.8%
108,331
Compared to previous month
Last year
-19.9%
1,667,699
Compared to previous year
1
28
Feature flags for React made easy with hooks, HOC and Render Props
Install it from npm.
1yarn add flagged 2# npm i flagged
Import the FlagsProvider
in your code and wrap your application around it.
1import { createRoot } from "react-dom/client"; 2import { FlagsProvider } from "flagged"; 3 4import { App } from "./components/app"; 5 6createRoot(document.getElementById("root")!).render( 7 <FlagsProvider features={{ v2: true }}> 8 <App /> 9 </FlagsProvider>, 10);
Now use useFeature
, withFeature
or Feature
to check if the feature is enabled in your application:
The features prop you pass to FlagsProvider
could be an array of strings or an object, if you decide to use an object you could also pass nested objects to group feature flags together.
Using an Array
1createRoot(document.getElementById("root")!).render( 2 <FlagsProvider features={["v2", "moderate"]}> 3 <App /> 4 </FlagsProvider>, 5);
Using an Object
1createRoot(document.getElementById("root")!).render( 2 <FlagsProvider features={{ v2: true, moderate: false }}> 3 <App /> 4 </FlagsProvider>, 5);
Using Nested Objects
1createRoot(document.getElementById("root")!).render( 2 <FlagsProvider 3 features={{ v2: true, content: { moderate: true, admin: false } }} 4 > 5 <App /> 6 </FlagsProvider>, 7);
If you use nested objects you will need to either use the useFeatures
hook or pass a string separated by /
, e.g. content/moderate
to read nested flags, if you don't pass the whole path you will get an object so content
will return { moderate: false }
when reading it.
useFeature
Custom HookThe useFeature
custom hook is the base for the HOC and Render Prop implementation, it lets you check if a single feature is enabled and get a boolean, then you can do anything you want with that value, uesful to use it in combination with other hooks like useEffect or to show two different UIs based on a feature being enabled or not.
1import { useFeature } from "flagged"; 2 3export function Header() { 4 const hasV2 = useFeature("v2"); 5 6 return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>; 7}
withFeature
High Order ComponentThis withFeature
high order component let's you wrap a component behind a feature flag, this way the parent component using your wrapped component doesn't need to know anything about the feature flag. This is useful when you don't need to provide a fallback if the feature is disabled, e.g. for admin pieces of UI or new features you want to hide completely.
1import { withFeature } from "flagged"; 2 3export const Heading = withFeature("newHeading")(function Heading() { 4 return <h1>My App v2</h1>; 5});
Feature
Render PropThe Feature
component works using the render prop pattern and as a wrapper. This component is useful if you want to hide an specific part of a component behind a feature flag but don't want to wrap the whole component.
Pass the name of the feature you want to check for and a children value and it will not render the children if the feature is enabled.
1import { Feature } from "flagged"; 2 3export function Header() { 4 return ( 5 <header> 6 <Feature name="v2"> 7 <h1>My App v2</h1> 8 </Feature> 9 </header> 10 ); 11}
Another option is to pass a function as children and get a boolean if the feature is enabled, this way you can render two different pieces of UI based on the feature being enabled or not.
1import { Feature } from "flagged"; 2 3export function Header() { 4 return ( 5 <header> 6 <Feature name="v2"> 7 {(isEnabled) => (isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>)} 8 </Feature> 9 </header> 10 ); 11}
In both cases you could also send a render
prop instead of children
.
1import { Feature } from "flagged"; 2 3export function Header() { 4 return ( 5 <header> 6 <Feature name="v2" render={<h1>My App v2</h1>} /> 7 </header> 8 ); 9}
1import { Feature } from "flagged"; 2 3export function Header() { 4 return ( 5 <header> 6 <Feature 7 name="v2" 8 render={(isEnabled) => 9 isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1> 10 } 11 /> 12 </header> 13 ); 14}
useFeatures
Custom HookThe useFeatures
custom hook is the base for the useFeature
custom hook, it gives you the entire feature flags object or array you sent to FlagsProvider
so you could use it however you want.
1import { useFeatures } from "flagged"; 2 3export function Header() { 4 let features = useFeatures(); 5 6 return ( 7 <header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header> 8 ); 9}
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
5 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 4
Reason
Found 1/5 approved changesets -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-12-16
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More