@schematichq/schematic-react 1.1.0 → 1.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 +14 -4
- package/dist/schematic-react.cjs.js +2 -2
- package/dist/schematic-react.d.ts +2 -2
- package/dist/schematic-react.esm.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
@@ -14,6 +14,8 @@ pnpm add @schematichq/schematic-react
|
|
14
14
|
|
15
15
|
## Usage
|
16
16
|
|
17
|
+
### SchematicProvider
|
18
|
+
|
17
19
|
You can use the `SchematicProvider` to wrap your application and provide the Schematic instance to all components:
|
18
20
|
|
19
21
|
```tsx
|
@@ -27,6 +29,8 @@ ReactDOM.render(
|
|
27
29
|
);
|
28
30
|
```
|
29
31
|
|
32
|
+
### Setting context
|
33
|
+
|
30
34
|
To set the user context for events and flag checks, you can use the `identify` function provided by the `useSchematicEvents` hook:
|
31
35
|
|
32
36
|
```tsx
|
@@ -49,6 +53,8 @@ const MyComponent = () => {
|
|
49
53
|
};
|
50
54
|
```
|
51
55
|
|
56
|
+
### Tracking usage
|
57
|
+
|
52
58
|
Once you've set the context with `identify`, you can track events:
|
53
59
|
|
54
60
|
```tsx
|
@@ -65,6 +71,8 @@ const MyComponent = () => {
|
|
65
71
|
};
|
66
72
|
```
|
67
73
|
|
74
|
+
### Checking flags
|
75
|
+
|
68
76
|
To check a flag, you can use the `useSchematicFlag` hook:
|
69
77
|
|
70
78
|
```tsx
|
@@ -78,11 +86,13 @@ const MyComponent = () => {
|
|
78
86
|
};
|
79
87
|
```
|
80
88
|
|
81
|
-
|
89
|
+
### Checking flags
|
90
|
+
|
91
|
+
You can check entitlements (i.e., company access to a feature) using a flag check as well, and using the `useSchematicEntitlement` hook you can get additional data to render various feature states:
|
82
92
|
|
83
93
|
```tsx
|
84
94
|
import {
|
85
|
-
|
95
|
+
useSchematicEntitlement,
|
86
96
|
useSchematicIsPending,
|
87
97
|
} from "@schematichq/schematic-react";
|
88
98
|
import { Feature, Loader, NoAccess } from "./components";
|
@@ -94,7 +104,7 @@ const MyComponent = () => {
|
|
94
104
|
featureUsage,
|
95
105
|
featureUsageExceeded,
|
96
106
|
value: isFeatureEnabled,
|
97
|
-
} =
|
107
|
+
} = useSchematicEntitlement("my-flag-key");
|
98
108
|
|
99
109
|
// loading state
|
100
110
|
if (schematicIsPending) {
|
@@ -111,7 +121,7 @@ const MyComponent = () => {
|
|
111
121
|
);
|
112
122
|
}
|
113
123
|
|
114
|
-
// either feature or "no access" state
|
124
|
+
// either feature state or "no access" state
|
115
125
|
return isFeatureEnabled ? <Feature /> : <NoAccess />;
|
116
126
|
};
|
117
127
|
```
|
@@ -36,9 +36,9 @@ __export(index_exports, {
|
|
36
36
|
UsagePeriod: () => UsagePeriod,
|
37
37
|
useSchematic: () => useSchematic,
|
38
38
|
useSchematicContext: () => useSchematicContext,
|
39
|
+
useSchematicEntitlement: () => useSchematicEntitlement,
|
39
40
|
useSchematicEvents: () => useSchematicEvents,
|
40
41
|
useSchematicFlag: () => useSchematicFlag,
|
41
|
-
useSchematicFlagCheck: () => useSchematicFlagCheck,
|
42
42
|
useSchematicIsPending: () => useSchematicIsPending
|
43
43
|
});
|
44
44
|
module.exports = __toCommonJS(index_exports);
|
@@ -1299,7 +1299,7 @@ var useSchematicFlag = (key, opts) => {
|
|
1299
1299
|
}, [client, key, fallback]);
|
1300
1300
|
return (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot);
|
1301
1301
|
};
|
1302
|
-
var
|
1302
|
+
var useSchematicEntitlement = (key, opts) => {
|
1303
1303
|
const client = useSchematicClient(opts);
|
1304
1304
|
const fallback = opts?.fallback ?? false;
|
1305
1305
|
const fallbackCheck = (0, import_react2.useMemo)(
|
@@ -72,6 +72,8 @@ export declare const useSchematicContext: (opts?: SchematicHookOpts) => {
|
|
72
72
|
setContext: (context: SchematicJS.SchematicContext) => Promise<void>;
|
73
73
|
};
|
74
74
|
|
75
|
+
export declare const useSchematicEntitlement: (key: string, opts?: UseSchematicFlagOpts) => SchematicJS.CheckFlagReturn;
|
76
|
+
|
75
77
|
export declare const useSchematicEvents: (opts?: SchematicHookOpts) => {
|
76
78
|
track: (body: SchematicJS.EventBodyTrack) => Promise<void>;
|
77
79
|
identify: (body: SchematicJS.EventBodyIdentify) => Promise<void>;
|
@@ -79,8 +81,6 @@ export declare const useSchematicEvents: (opts?: SchematicHookOpts) => {
|
|
79
81
|
|
80
82
|
export declare const useSchematicFlag: (key: string, opts?: UseSchematicFlagOpts) => boolean;
|
81
83
|
|
82
|
-
export declare const useSchematicFlagCheck: (key: string, opts?: UseSchematicFlagOpts) => SchematicJS.CheckFlagReturn;
|
83
|
-
|
84
84
|
export declare type UseSchematicFlagOpts = SchematicHookOpts & {
|
85
85
|
fallback?: boolean;
|
86
86
|
};
|
@@ -1254,7 +1254,7 @@ var useSchematicFlag = (key, opts) => {
|
|
1254
1254
|
}, [client, key, fallback]);
|
1255
1255
|
return useSyncExternalStore(subscribe, getSnapshot);
|
1256
1256
|
};
|
1257
|
-
var
|
1257
|
+
var useSchematicEntitlement = (key, opts) => {
|
1258
1258
|
const client = useSchematicClient(opts);
|
1259
1259
|
const fallback = opts?.fallback ?? false;
|
1260
1260
|
const fallbackCheck = useMemo2(
|
@@ -1291,9 +1291,9 @@ export {
|
|
1291
1291
|
UsagePeriod,
|
1292
1292
|
useSchematic,
|
1293
1293
|
useSchematicContext,
|
1294
|
+
useSchematicEntitlement,
|
1294
1295
|
useSchematicEvents,
|
1295
1296
|
useSchematicFlag,
|
1296
|
-
useSchematicFlagCheck,
|
1297
1297
|
useSchematicIsPending
|
1298
1298
|
};
|
1299
1299
|
/*! Bundled license information:
|