@flagwire/sdk-react 0.1.0 → 0.1.1
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 +31 -4
- package/package.json +12 -2
package/README.md
CHANGED
|
@@ -1,22 +1,49 @@
|
|
|
1
1
|
# `@flagwire/sdk-react`
|
|
2
2
|
|
|
3
|
-
React provider and hooks for `@flagwire/sdk-js
|
|
3
|
+
React provider and hooks for [`@flagwire/sdk-js`](../sdk-js).
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @flagwire/sdk-js @flagwire/sdk-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
4
12
|
|
|
5
13
|
```tsx
|
|
14
|
+
import { createClient } from "@flagwire/sdk-js";
|
|
6
15
|
import { FlagProvider, useFlag } from "@flagwire/sdk-react";
|
|
7
16
|
|
|
17
|
+
const client = createClient({
|
|
18
|
+
clientKey: import.meta.env.VITE_FLAGWIRE_CLIENT_KEY,
|
|
19
|
+
context: { key: "user-123" },
|
|
20
|
+
});
|
|
21
|
+
|
|
8
22
|
function Checkout() {
|
|
9
23
|
const redesigned = useFlag("checkout-redesign", false);
|
|
10
24
|
return redesigned ? <NewCheckout /> : <LegacyCheckout />;
|
|
11
25
|
}
|
|
12
26
|
|
|
13
|
-
export function App(
|
|
27
|
+
export function App() {
|
|
14
28
|
return (
|
|
15
|
-
<FlagProvider client={client} waitForReady fallback={
|
|
29
|
+
<FlagProvider client={client} waitForReady fallback={<AppSkeleton />}>
|
|
16
30
|
<Checkout />
|
|
17
31
|
</FlagProvider>
|
|
18
32
|
);
|
|
19
33
|
}
|
|
20
34
|
```
|
|
21
35
|
|
|
22
|
-
Create
|
|
36
|
+
Create one browser client for the application lifecycle and call `client.close()` when that
|
|
37
|
+
lifecycle ends. In SSR frameworks, create the client in browser-only code after hydration.
|
|
38
|
+
|
|
39
|
+
## API
|
|
40
|
+
|
|
41
|
+
- `<FlagProvider client={client}>` makes a browser client available to descendants.
|
|
42
|
+
- `waitForReady` delays children until initialization settles. It defaults to `false`, allowing
|
|
43
|
+
components to render immediately with their code defaults.
|
|
44
|
+
- `fallback` is rendered while a provider configured with `waitForReady` is initializing.
|
|
45
|
+
- `useFlag(key, defaultValue)` returns a value and re-renders only when that flag changes.
|
|
46
|
+
- `useFlagClient()` returns the current client for context changes or detailed evaluation data.
|
|
47
|
+
|
|
48
|
+
`useFlag` always requires a default value. Initialization and refresh failures therefore preserve
|
|
49
|
+
the application's declared behavior.
|
package/package.json
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flagwire/sdk-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React bindings for the FlagWire browser SDK",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"feature-flags",
|
|
7
|
+
"react",
|
|
8
|
+
"hooks",
|
|
9
|
+
"typescript"
|
|
10
|
+
],
|
|
5
11
|
"license": "MIT",
|
|
12
|
+
"homepage": "https://github.com/flagwire/flagwire-js/tree/main/packages/sdk-react#readme",
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/flagwire/flagwire-js/issues"
|
|
15
|
+
},
|
|
6
16
|
"type": "module",
|
|
7
17
|
"files": [
|
|
8
18
|
"dist"
|
|
@@ -37,7 +47,7 @@
|
|
|
37
47
|
"happy-dom": "20.11.6",
|
|
38
48
|
"react": "19.2.8",
|
|
39
49
|
"react-dom": "19.2.8",
|
|
40
|
-
"@flagwire/sdk-js": "0.1.
|
|
50
|
+
"@flagwire/sdk-js": "0.1.1"
|
|
41
51
|
},
|
|
42
52
|
"scripts": {
|
|
43
53
|
"build": "node ../../scripts/clean-package-dist.mjs && tsc -p tsconfig.build.json && esbuild src/index.ts --bundle --minify --format=esm --platform=browser --target=es2022 --external:react --external:@flagwire/sdk-js --outfile=dist/index.js",
|