https://github.com/fdaciuk/react-ff
Feature Flag component for React
https://github.com/fdaciuk/react-ff
feature-flag feature-toggle hacktoberfest react typescript
Last synced: about 1 month ago
JSON representation
Feature Flag component for React
- Host: GitHub
- URL: https://github.com/fdaciuk/react-ff
- Owner: fdaciuk
- License: mit
- Created: 2021-09-21T20:00:04.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-09T21:27:19.000Z (over 3 years ago)
- Last Synced: 2025-05-29T09:11:51.738Z (about 1 month ago)
- Topics: feature-flag, feature-toggle, hacktoberfest, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@fdaciuk/react-ff
- Size: 166 KB
- Stars: 46
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Welcome to React Feature Flag 👋
> Type safe Components to create Feature Flags (or Feature Toggle) with React.js
## Install
```sh
yarn add @fdaciuk/react-ff
```
## Usage
First of all, we have to create our componentes using `createFeatureFlag` function.
Create a new file (e.g. `src/feature-flag.tsx`) with this content:
```ts
import { createFeatureFlag } from '@fdaciuk/react-ff'
export type Flags =
| 'NEW_HEADER'
| 'NEW_FOOTER'
const { FF, FFProvider } = createFeatureFlag()
export { FF, FFProvider }
```
Now, on top of your app, import `FFProvider` from `src/feature-flag.tsx`, and pass all the flags your app will use, following the shape:
```ts
const flags = {
NEW_HEADER: true,
NEW_FOOTER: false,
}
```
In the above example, the user has access to something that should be rendered by the flag `NEW_HEADER`, but not by the flag `NEW_FOOTER`.
Usage of `FFProvider`:
```tsx
function App () {
const flags = {
NEW_HEADER: true,
NEW_FOOTER: false,
}
return (
)
}
```
Now, anywhere on your app, you can use the `FF` component to make the feature flag (or feature toggle):
```tsx
function TheRestOfMyApp () {
return (
<>
}>
} />
>
)
}
function NewHeader () {
return (
New header
)
}
function OldHeader () {
return (
Old header
)
}
function NewFooter () {
return (
New footer
)
}
```
The `flag` prop is type safe, and will only accept flags from type `Flags`, passed for `createFeatureFlag` function.
The `children` is optional. You can pass a children when you want to render a fallback component, whether flag is disabled (`false`).
## Author
👤 **Fernando Daciuk - @fdaciuk**
* Website: https://daciuk.dev
* Twitter: [@fdaciuk](https://twitter.com/fdaciuk)
* Github: [@fdaciuk](https://github.com/fdaciuk)
* LinkedIn: [@fdaciuk](https://linkedin.com/in/fdaciuk)
## Credits
Logo by [@vmarcosp](https://github.com/vmarcosp) ♥️
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/fdaciuk/react-ff/issues). You can also take a look at the [contributing guide](https://github.com/fdaciuk/react-ff/blob/master/CONTRIBUTING.md).
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2021 [Fernando Daciuk - @fdaciuk](https://github.com/fdaciuk).
This project is [MIT](https://github.com/fdaciuk/react-ff/blob/master/LICENSE.md) licensed.