@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 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
- For flags that are checking company access to a feature based on usage, you can render additional states using the `useSchematicFlagCheck` hook, e.g.:
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
- useSchematicFlagCheck,
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
- } = useSchematicFlagCheck("my-flag-key");
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 useSchematicFlagCheck = (key, opts) => {
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 useSchematicFlagCheck = (key, opts) => {
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:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schematichq/schematic-react",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "main": "dist/schematic-react.cjs.js",
5
5
  "module": "dist/schematic-react.esm.js",
6
6
  "types": "dist/schematic-react.d.ts",