@omniretail/omniflags-react 1.0.0 → 1.0.2
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 +46 -3
- package/dist/hooks.d.ts +3 -3
- package/dist/hooks.js +3 -3
- package/dist/hooks.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/provider.js +1 -0
- package/dist/provider.js.map +1 -1
- package/package.json +10 -4
package/README.md
CHANGED
|
@@ -72,12 +72,12 @@ const result = useFlagVariant("store.show-banner");
|
|
|
72
72
|
// result.value, result.variant, result.reason, result.ruleId, result.errorCode
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
-
### `
|
|
75
|
+
### `useFlagStatus`
|
|
76
76
|
|
|
77
77
|
Returns the current loading state of the flag client.
|
|
78
78
|
|
|
79
79
|
```tsx
|
|
80
|
-
const { isFetching, isLoading, origin, error } =
|
|
80
|
+
const { isFetching, isLoading, origin, error } = useFlagStatus();
|
|
81
81
|
```
|
|
82
82
|
|
|
83
83
|
| Field | Type | Description |
|
|
@@ -89,7 +89,7 @@ const { isFetching, isLoading, origin, error } = useFlagLoading();
|
|
|
89
89
|
|
|
90
90
|
```tsx
|
|
91
91
|
function FlagGate({ children }: { children: React.ReactNode }) {
|
|
92
|
-
const { isLoading } =
|
|
92
|
+
const { isLoading } = useFlagStatus();
|
|
93
93
|
if (isLoading) return <Spinner />;
|
|
94
94
|
return <>{children}</>;
|
|
95
95
|
}
|
|
@@ -118,3 +118,46 @@ function Banner({ customerId, businessId }: Props) {
|
|
|
118
118
|
## Flag keys
|
|
119
119
|
|
|
120
120
|
Keys are namespaced by project: `{projectKey}.{flagKey}`. Find the full flag key in the OmniFlags dashboard on the flag detail page.
|
|
121
|
+
|
|
122
|
+
## Next.js (App Router)
|
|
123
|
+
|
|
124
|
+
Add the provider to your root layout. Store the SDK key in `.env.local`:
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
NEXT_PUBLIC_OMNIFLAGS_SDK_KEY=your-sdk-key
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
// app/layout.tsx
|
|
132
|
+
import { OmniFlagsProvider } from '@omniretail/omniflags-react'
|
|
133
|
+
|
|
134
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
135
|
+
return (
|
|
136
|
+
<html>
|
|
137
|
+
<body>
|
|
138
|
+
<OmniFlagsProvider sdkKey={process.env.NEXT_PUBLIC_OMNIFLAGS_SDK_KEY!}>
|
|
139
|
+
{children}
|
|
140
|
+
</OmniFlagsProvider>
|
|
141
|
+
</body>
|
|
142
|
+
</html>
|
|
143
|
+
)
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Use hooks inside `'use client'` components. Flag evaluation happens on the client after the first fetch, so guard against the initial loading state where needed:
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
'use client'
|
|
151
|
+
import { useFlagValue, useFlagStatus } from '@omniretail/omniflags-react'
|
|
152
|
+
|
|
153
|
+
export function CheckoutButton() {
|
|
154
|
+
const { isLoading } = useFlagStatus()
|
|
155
|
+
const useNewFlow = useFlagValue('checkout.new-flow', false)
|
|
156
|
+
|
|
157
|
+
if (isLoading) return null
|
|
158
|
+
|
|
159
|
+
return <button>{useNewFlow ? 'Express checkout' : 'Checkout'}</button>
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
Server Components passed as `children` into the provider are unaffected — they still run on the server.
|
package/dist/hooks.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { EvaluationContext, EvaluationResult, LoadingState } from "@omniretail/omniflags-core";
|
|
2
2
|
/**
|
|
3
|
-
* Returns the current
|
|
4
|
-
* came from (NONE / CACHE / SERVER), and the last fetch error if any.
|
|
3
|
+
* Returns the current status of the flag client — whether flags are fetching,
|
|
4
|
+
* where they came from (NONE / CACHE / SERVER), and the last fetch error if any.
|
|
5
5
|
*/
|
|
6
|
-
export declare function
|
|
6
|
+
export declare function useFlagStatus(): LoadingState;
|
|
7
7
|
/**
|
|
8
8
|
* Get the full OmniFlags client and ready state.
|
|
9
9
|
*/
|
package/dist/hooks.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useState, useEffect, useRef } from "react";
|
|
2
2
|
import { useOmniFlagsContext } from "./context.js";
|
|
3
3
|
/**
|
|
4
|
-
* Returns the current
|
|
5
|
-
* came from (NONE / CACHE / SERVER), and the last fetch error if any.
|
|
4
|
+
* Returns the current status of the flag client — whether flags are fetching,
|
|
5
|
+
* where they came from (NONE / CACHE / SERVER), and the last fetch error if any.
|
|
6
6
|
*/
|
|
7
|
-
export function
|
|
7
|
+
export function useFlagStatus() {
|
|
8
8
|
const { client } = useOmniFlagsContext();
|
|
9
9
|
const [state, setState] = useState(() => client.loadingState);
|
|
10
10
|
useEffect(() => {
|
package/dist/hooks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD;;;GAGG;AACH,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD;;;GAGG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;YAC7D,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY;IAC1B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AAC3B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,OAAO,CACrB,OAAe,EACf,OAA2B,EAC3B,YAAY,GAAG,KAAK;IAEpB,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3F,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;YACzE,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC,CAAC,kEAAkE;QAC5E,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QACvD,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC,gCAAgC,EAAE,MAAM,CAAC,CAAC;QACxE,OAAO,GAAG,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEpC,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAC1B,OAAe,EACf,YAAe,EACf,OAA2B;IAE3B,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAI,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhG,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAI,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;YAC3E,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC;QACT,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QACvD,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC,gCAAgC,EAAE,MAAM,CAAC,CAAC;QACxE,OAAO,GAAG,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEpC,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAC5B,OAAe,EACf,OAA2B;IAE3B,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAElG,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;YAC5D,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACpG,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC;QACT,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QACvD,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC,gCAAgC,EAAE,MAAM,CAAC,CAAC;QACxE,OAAO,GAAG,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,OAAO,MAAM,CAAC;AAChB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { OmniFlagsProvider } from "./provider.js";
|
|
2
2
|
export type { OmniFlagsProviderProps } from "./provider.js";
|
|
3
|
-
export { useOmniFlags, useFlag, useFlagValue, useFlagVariant,
|
|
3
|
+
export { useOmniFlags, useFlag, useFlagValue, useFlagVariant, useFlagStatus } from "./hooks.js";
|
|
4
4
|
export { OmniFlagsContext } from "./context.js";
|
|
5
5
|
export type { OmniFlagsContextValue } from "./context.js";
|
|
6
6
|
export type { EvaluationContext, EvaluationResult, FlagConfig, FlagOrigin, Hook, LoadingState, ProviderEvent, } from "@omniretail/omniflags-core";
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { OmniFlagsProvider } from "./provider.js";
|
|
2
|
-
export { useOmniFlags, useFlag, useFlagValue, useFlagVariant,
|
|
2
|
+
export { useOmniFlags, useFlag, useFlagValue, useFlagVariant, useFlagStatus } from "./hooks.js";
|
|
3
3
|
export { OmniFlagsContext } from "./context.js";
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}
|
package/dist/provider.js
CHANGED
package/dist/provider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAYhD,MAAM,UAAU,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAA0B;IACrF,MAAM,QAAQ,GAAI,IAAsB,CAAC,QAAQ,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,MAAM,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC9B,IAAI,OAAO;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;YAChB,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,KAAK,CAAC,aAAa,CACxB,gBAAgB,CAAC,QAAQ,EACzB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAC5B,QAAQ,CACT,CAAC;AACJ,CAAC"}
|
|
1
|
+
{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAYhD,MAAM,UAAU,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAA0B;IACrF,MAAM,QAAQ,GAAI,IAAsB,CAAC,QAAQ,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,MAAM,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC9B,IAAI,OAAO;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;YAChB,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,KAAK,CAAC,aAAa,CACxB,gBAAgB,CAAC,QAAQ,EACzB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAC5B,QAAQ,CACT,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omniretail/omniflags-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "OmniFlags React SDK — provider + hooks for feature flags",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
"types": "./dist/index.d.ts"
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
|
-
"files": [
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
15
17
|
"scripts": {
|
|
16
18
|
"build": "tsc",
|
|
17
19
|
"test": "vitest run",
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
"react": "^18.0.0 || ^19.0.0"
|
|
22
24
|
},
|
|
23
25
|
"dependencies": {
|
|
24
|
-
"@omniretail/omniflags-core": "
|
|
26
|
+
"@omniretail/omniflags-core": "^1.0.1"
|
|
25
27
|
},
|
|
26
28
|
"devDependencies": {
|
|
27
29
|
"@testing-library/react": "^16.0.0",
|
|
@@ -35,6 +37,10 @@
|
|
|
35
37
|
"publishConfig": {
|
|
36
38
|
"access": "public"
|
|
37
39
|
},
|
|
38
|
-
"keywords": [
|
|
40
|
+
"keywords": [
|
|
41
|
+
"feature-flags",
|
|
42
|
+
"omniflags",
|
|
43
|
+
"react"
|
|
44
|
+
],
|
|
39
45
|
"license": "MIT"
|
|
40
46
|
}
|