https://github.com/sergiodxa/flagged
Feature Flags for React made easy with hooks, HOC and Render Props
https://github.com/sergiodxa/flagged
feature-flags higher-order-component hoc hooks react react-hooks render-prop render-props typescript
Last synced: about 1 year ago
JSON representation
Feature Flags for React made easy with hooks, HOC and Render Props
- Host: GitHub
- URL: https://github.com/sergiodxa/flagged
- Owner: sergiodxa
- License: mit
- Created: 2019-10-25T19:11:40.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T10:20:59.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:48:23.415Z (over 1 year ago)
- Topics: feature-flags, higher-order-component, hoc, hooks, react, react-hooks, render-prop, render-props, typescript
- Language: TypeScript
- Homepage: https://github.com/sergiodxa/flagged
- Size: 1.54 MB
- Stars: 404
- Watchers: 4
- Forks: 21
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Flagged
> ### Feature flags for React made easy with hooks, HOC and Render Props
## Features
- Hooks API
- High Order Component API
- Render Props API
- TypeScript Support
- Zero Dependencies
- Nested Flags
## How to Use It
Install it from npm.
```bash
yarn add flagged
# npm i flagged
```
Import the `FlagsProvider` in your code and wrap your application around it.
```tsx
import { createRoot } from "react-dom/client";
import { FlagsProvider } from "flagged";
import { App } from "./components/app";
createRoot(document.getElementById("root")!).render(
,
);
```
Now use `useFeature`, `withFeature` or `Feature` to check if the feature is enabled in your application:
### Features Valid Values
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**
```tsx
createRoot(document.getElementById("root")!).render(
,
);
```
**Using an Object**
```tsx
createRoot(document.getElementById("root")!).render(
,
);
```
**Using Nested Objects**
```tsx
createRoot(document.getElementById("root")!).render(
,
);
```
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 Hook
The `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.
```tsx
import { useFeature } from "flagged";
export function Header() {
const hasV2 = useFeature("v2");
return {hasV2 ?
My App v2
: My App v1
};
}
```
### `withFeature` High Order Component
This `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.
```tsx
import { withFeature } from "flagged";
export const Heading = withFeature("newHeading")(function Heading() {
return
My App v2
;
});
```
### `Feature` Render Prop
The `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.
```tsx
import { Feature } from "flagged";
export function Header() {
return (
My App v2
);
}
```
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.
```tsx
import { Feature } from "flagged";
export function Header() {
return (
{(isEnabled) => (isEnabled ?
My App v2
: My App v1
)}
);
}
```
In both cases you could also send a `render` prop instead of `children`.
```tsx
import { Feature } from "flagged";
export function Header() {
return (
My App v2} />
);
}
```
```tsx
import { Feature } from "flagged";
export function Header() {
return (
isEnabled ?
My App v2
: My App v1
}
/>
);
}
```
### `useFeatures` Custom Hook
The `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.
```tsx
import { useFeatures } from "flagged";
export function Header() {
let features = useFeatures();
return (
{features.v2 ?
My App v2
: My App v1
}
);
}
```