@geejay/use-feature-flags 1.0.17 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +158 -20
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,41 +1,179 @@
|
|
|
1
|
-
# use-feature-flags
|
|
2
|
-
|
|
3
|
-
A lightweight React hook for fetching feature flags from Supabase. It ships with sensible defaults so you can drop it in and start using feature flags immediately.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
1
|
+
# @geejay/use-feature-flags
|
|
6
2
|
|
|
7
3
|
```
|
|
8
|
-
|
|
4
|
+
_____ ___ ____ ___ _ ____
|
|
5
|
+
|_ _/ _ \| __ )_ _| / \ / ___|
|
|
6
|
+
| || | | | _ \| | / _ \ \___ \
|
|
7
|
+
| || |_| | |_) | | / ___ \ ___) |
|
|
8
|
+
|_| \___/|____/___/_/ \_\____/
|
|
9
|
+
|
|
10
|
+
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
**TOBIAS** — the **T**otally **O**ptimized **B**ot for **I**ntelligent **A**pp **S**witching (Safe).
|
|
14
|
+
A tiny React hook that lets you manage feature flags **at runtime** across React, React Native, and React Native Web—no redeploys required.
|
|
12
15
|
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## ✨ What you get
|
|
19
|
+
|
|
20
|
+
* **Drop-in hook**: `useFeatureFlags()` returns `isActive(flag)` and `loading`.
|
|
21
|
+
* **Instant toggles**: Flip features on/off without reloading your app.
|
|
22
|
+
* **Multi-environment**: Scope flags to `dev`, `staging`, `prod`, previews, etc.
|
|
23
|
+
* **Multi-tenant**: Keep flags organized per customer or workspace.
|
|
24
|
+
* **Friendly UI**: Manage flags from a simple web dashboard.
|
|
25
|
+
* **TOBIAS Cleanup**: Our companion bot **scans for stale flags** and **opens PRs** to safely remove them, so your codebase stays clean without the busywork.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 🚀 Installation
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install @geejay/use-feature-flags
|
|
33
|
+
# or
|
|
34
|
+
yarn add @geejay/use-feature-flags
|
|
13
35
|
```
|
|
14
|
-
yarn add use-feature-flags
|
|
15
|
-
```
|
|
16
36
|
|
|
17
|
-
|
|
37
|
+
---
|
|
38
|
+
Here’s the updated **Quick Start** section with your note about the environment parameter baked in — so readers know it’s **usually not needed**.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## ⚡️ Quick start
|
|
43
|
+
|
|
44
|
+
> **One-time init:** Pass your API key on the **first** call anywhere in your app.
|
|
45
|
+
> **Thereafter:** Just call `useFeatureFlags()` with **no arguments** — the key is remembered.
|
|
46
|
+
|
|
47
|
+
The `environment` parameter is **optional** — in most cases you don’t need it.
|
|
48
|
+
If omitted, the app will **auto-detect** based on the domain:
|
|
49
|
+
|
|
50
|
+
* **Web**: Uses the current domain (e.g. `myapp.com`, `staging.myapp.com`)
|
|
51
|
+
* **Local dev**: Uses `"localhost"` when testing locally
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
### Example: first call (e.g., in your root)
|
|
18
56
|
|
|
19
57
|
```tsx
|
|
20
|
-
|
|
58
|
+
// App.tsx
|
|
59
|
+
import { useFeatureFlags } from '@geejay/use-feature-flags';
|
|
21
60
|
|
|
22
|
-
export default function
|
|
23
|
-
|
|
61
|
+
export default function App() {
|
|
62
|
+
// ✅ Initialize once with your API key
|
|
63
|
+
// Environment is optional — auto-detects in most cases
|
|
64
|
+
const { loading } = useFeatureFlags("YOUR-API-KEY");
|
|
24
65
|
|
|
25
66
|
if (loading) return null;
|
|
67
|
+
return <MainRoutes />;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
### Example: subsequent calls (no key needed)
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
// components/Dashboard.tsx
|
|
77
|
+
import { useFeatureFlags } from '@geejay/use-feature-flags';
|
|
78
|
+
|
|
79
|
+
export default function Dashboard() {
|
|
80
|
+
// ✅ No API key here — it’s already remembered
|
|
81
|
+
const { isActive, loading } = useFeatureFlags();
|
|
26
82
|
|
|
83
|
+
if (loading) return null;
|
|
27
84
|
return isActive('new-dashboard') ? <NewDashboard /> : <OldDashboard />;
|
|
28
85
|
}
|
|
29
86
|
```
|
|
30
87
|
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
### Another component, still no key
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
// components/Header.tsx
|
|
94
|
+
import { useFeatureFlags } from '@geejay/use-feature-flags';
|
|
95
|
+
|
|
96
|
+
export function Header() {
|
|
97
|
+
const { isActive } = useFeatureFlags(); // ✅ key remembered globally
|
|
98
|
+
return isActive('show-announcement') ? <Banner /> : null;
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
#### Notes
|
|
105
|
+
|
|
106
|
+
* Pass the API key **only once** — the hook remembers it for all future calls in the same session.
|
|
107
|
+
* Environment is **usually not required** — the hook will detect it automatically.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
**Tips**
|
|
112
|
+
|
|
113
|
+
* Call `useFeatureFlags("YOUR-API-KEY", "production")` if you want to force the app to use a specific custom environment. Maybe useful for mobile users??
|
|
114
|
+
* You can read multiple flags; `isActive` is stable and fast.
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## 🧰 Flag management
|
|
119
|
+
|
|
120
|
+
Use the hosted dashboard to:
|
|
121
|
+
|
|
122
|
+
* Create/edit/delete flags
|
|
123
|
+
* Group by environment and tenant
|
|
124
|
+
* Toggle in real time and see changes reflected instantly
|
|
125
|
+
|
|
126
|
+
Get started: **[https://featureflags-ai.netlify.app/](https://featureflags-ai.netlify.app/)**
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## 🤖 TOBIAS: automatic flag cleanup PRs
|
|
131
|
+
|
|
132
|
+
Your team shouldn’t spend Fridays hunting down dead flags.
|
|
133
|
+
**TOBIAS** keeps your repo tidy by:
|
|
134
|
+
|
|
135
|
+
* scanning for **stale/retired flags**
|
|
136
|
+
* generating **safe diffs** (removing unused checks, dead branches, and config)
|
|
137
|
+
* opening **pull requests** with a friendly summary and checklist
|
|
138
|
+
|
|
139
|
+
Example PR title:
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
🧹 TOBIAS: remove stale flags (billing_v2, heroA/B)
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Example PR body snippet:
|
|
146
|
+
|
|
147
|
+
```md
|
|
148
|
+
This automated PR removes stale flags detected by TOBIAS.
|
|
149
|
+
|
|
150
|
+
- Removed: `billing_v2`, `heroA/B`
|
|
151
|
+
- Updated: related conditionals and config
|
|
152
|
+
- Notes: All changes are no-op at runtime
|
|
153
|
+
|
|
154
|
+
Review checklist:
|
|
155
|
+
- [ ] CI passes
|
|
156
|
+
- [ ] Screens relying on removed flags look correct
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
## 🧪 Local dev notes
|
|
162
|
+
|
|
163
|
+
* Works with React 18 (including Strict Mode).
|
|
164
|
+
* Designed for modern bundlers (Next.js, Vite, Expo/Metro).
|
|
165
|
+
* If you test the library locally via `yalc`, remember to remove the yalc reference before deploying your app.
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## 🤝 Contributing
|
|
170
|
+
|
|
171
|
+
Issues and PRs welcome! If you’ve got ideas for smarter cleanup rules or integrations, open a ticket—TOBIAS loves new tricks.
|
|
31
172
|
|
|
173
|
+
---
|
|
32
174
|
|
|
33
|
-
##
|
|
175
|
+
## 📄 License
|
|
34
176
|
|
|
35
|
-
|
|
36
|
-
- one-step install for your react/react-native/react-native-web apps
|
|
37
|
-
- toggles features on/off WITHOUT reload of your REACT app
|
|
38
|
-
- supports multiple environments/ subdomains from one UI
|
|
39
|
-
- supports multiple tenants
|
|
40
|
-
- bi-directional creation of flags and more!
|
|
177
|
+
MIT © GeeJay
|
|
41
178
|
|
|
179
|
+
---
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geejay/use-feature-flags",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
],
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "tsup",
|
|
20
|
-
"prepack": "npm run build"
|
|
20
|
+
"prepack": "npm run build",
|
|
21
|
+
"publish": "npm version patch && npm publish"
|
|
21
22
|
},
|
|
22
23
|
"publishConfig": {
|
|
23
24
|
"access": "public"
|