@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:
         
     |