@schematichq/schematic-react 1.1.0 → 1.1.2

package/README.md

@@ -14,6 +14,8 @@ pnpm add @schematichq/schematic-react
 
 ## Usage
 
+### SchematicProvider
+
 You can use the `SchematicProvider` to wrap your application and provide the Schematic instance to all components:
 
 ```tsx
@@ -27,6 +29,8 @@ ReactDOM.render(
 );
 ```
 
+### Setting context
+
 To set the user context for events and flag checks, you can use the `identify` function provided by the `useSchematicEvents` hook:
 
 ```tsx
@@ -49,6 +53,8 @@ const MyComponent = () => {
 };
 ```
 
+### Tracking usage
+
 Once you've set the context with `identify`, you can track events:
 
 ```tsx
@@ -65,6 +71,8 @@ const MyComponent = () => {
 };
 ```
 
+### Checking flags
+
 To check a flag, you can use the `useSchematicFlag` hook:
 
 ```tsx
@@ -78,11 +86,13 @@ const MyComponent = () => {
 };
 ```
 
-For flags that are checking company access to a feature based on usage, you can render additional states using the `useSchematicFlagCheck` hook, e.g.:
+### Checking entitlements
+
+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:
 
 ```tsx
 import {
-    useSchematicFlagCheck,
+    useSchematicEntitlement,
     useSchematicIsPending,
 } from "@schematichq/schematic-react";
 import { Feature, Loader, NoAccess } from "./components";
@@ -94,7 +104,7 @@ const MyComponent = () => {
         featureUsage,
         featureUsageExceeded,
         value: isFeatureEnabled,
-    } = useSchematicFlagCheck("my-flag-key");
+    } = useSchematicEntitlement("my-flag-key");
 
     // loading state
     if (schematicIsPending) {
@@ -111,7 +121,7 @@ const MyComponent = () => {
         );
     }
 
-    // either feature or "no access" state
+    // either feature state or "no access" state
     return isFeatureEnabled ? <Feature /> : <NoAccess />;
 };
 ```

package/dist/schematic-react.cjs.js

@@ -36,9 +36,9 @@ __export(index_exports, {
   UsagePeriod: () => UsagePeriod,
   useSchematic: () => useSchematic,
   useSchematicContext: () => useSchematicContext,
+  useSchematicEntitlement: () => useSchematicEntitlement,
   useSchematicEvents: () => useSchematicEvents,
   useSchematicFlag: () => useSchematicFlag,
-  useSchematicFlagCheck: () => useSchematicFlagCheck,
   useSchematicIsPending: () => useSchematicIsPending
 });
 module.exports = __toCommonJS(index_exports);
@@ -1299,7 +1299,7 @@ var useSchematicFlag = (key, opts) => {
   }, [client, key, fallback]);
   return (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot);
 };
-var useSchematicFlagCheck = (key, opts) => {
+var useSchematicEntitlement = (key, opts) => {
   const client = useSchematicClient(opts);
   const fallback = opts?.fallback ?? false;
   const fallbackCheck = (0, import_react2.useMemo)(

package/dist/schematic-react.d.ts

@@ -72,6 +72,8 @@ export declare const useSchematicContext: (opts?: SchematicHookOpts) => {
     setContext: (context: SchematicJS.SchematicContext) => Promise<void>;
 };
 
+export declare const useSchematicEntitlement: (key: string, opts?: UseSchematicFlagOpts) => SchematicJS.CheckFlagReturn;
+
 export declare const useSchematicEvents: (opts?: SchematicHookOpts) => {
     track: (body: SchematicJS.EventBodyTrack) => Promise<void>;
     identify: (body: SchematicJS.EventBodyIdentify) => Promise<void>;
@@ -79,8 +81,6 @@ export declare const useSchematicEvents: (opts?: SchematicHookOpts) => {
 
 export declare const useSchematicFlag: (key: string, opts?: UseSchematicFlagOpts) => boolean;
 
-export declare const useSchematicFlagCheck: (key: string, opts?: UseSchematicFlagOpts) => SchematicJS.CheckFlagReturn;
-
 export declare type UseSchematicFlagOpts = SchematicHookOpts & {
     fallback?: boolean;
 };

package/dist/schematic-react.esm.js

@@ -1254,7 +1254,7 @@ var useSchematicFlag = (key, opts) => {
   }, [client, key, fallback]);
   return useSyncExternalStore(subscribe, getSnapshot);
 };
-var useSchematicFlagCheck = (key, opts) => {
+var useSchematicEntitlement = (key, opts) => {
   const client = useSchematicClient(opts);
   const fallback = opts?.fallback ?? false;
   const fallbackCheck = useMemo2(
@@ -1291,9 +1291,9 @@ export {
   UsagePeriod,
   useSchematic,
   useSchematicContext,
+  useSchematicEntitlement,
   useSchematicEvents,
   useSchematicFlag,
-  useSchematicFlagCheck,
   useSchematicIsPending
 };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -28,27 +28,28 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^1.1.0"
+    "@schematichq/schematic-js": "^1.1.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.47.9",
-    "@types/jest": "^29.5.13",
-    "@types/react": "^18.3.9",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
-    "esbuild": "^0.24.0",
+    "@microsoft/api-extractor": "^7.49.2",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.8",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
+    "esbuild": "^0.24.2",
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-esbuild": "^0.3.0",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^3.3.3",
-    "react": "^18.3.1",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
     "react": ">=18"