@schematichq/schematic-react 1.0.3 → 1.1.1

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,10 +71,13 @@ const MyComponent = () => {
 };
 ```
 
-To check a flag, you can use the `useSchematicFlags` hook:
+### Checking flags
+
+To check a flag, you can use the `useSchematicFlag` hook:
 
 ```tsx
 import { useSchematicFlag } from "@schematichq/schematic-react";
+import { Feature, Fallback } from "./components";
 
 const MyComponent = () => {
     const isFeatureEnabled = useSchematicFlag("my-flag-key");
@@ -77,6 +86,46 @@ const MyComponent = () => {
 };
 ```
 
+### Checking flags
+
+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 {
+    useSchematicEntitlement,
+    useSchematicIsPending,
+} from "@schematichq/schematic-react";
+import { Feature, Loader, NoAccess } from "./components";
+
+const MyComponent = () => {
+    const schematicIsPending = useSchematicIsPending();
+    const {
+        featureAllocation,
+        featureUsage,
+        featureUsageExceeded,
+        value: isFeatureEnabled,
+    } = useSchematicEntitlement("my-flag-key");
+
+    // loading state
+    if (schematicIsPending) {
+        return <Loader />;
+    }
+
+    // usage exceeded state
+    if (featureUsageExceeded) {
+        return (
+            <div>
+                You have used all of your usage ({featureUsage} /{" "}
+                {featureAllocation})
+            </div>
+        );
+    }
+
+    // either feature state or "no access" state
+    return isFeatureEnabled ? <Feature /> : <NoAccess />;
+};
+```
+
 ## License
 
 MIT