@schematichq/schematic-react 1.1.0 → 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- 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:
|