@schematichq/schematic-react 1.0.3 → 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 +50 -1
- package/dist/schematic-react.cjs.js +290 -90
- package/dist/schematic-react.d.ts +11 -6
- package/dist/schematic-react.esm.js +287 -87
- package/package.json +2 -2
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,10 +71,13 @@ const MyComponent = () => {
|
|
|
65
71
|
};
|
|
66
72
|
```
|
|
67
73
|
|
|
68
|
-
|
|
74
|
+
### Checking flags
|
|
75
|
+
|
|
76
|
+
To check a flag, you can use the `useSchematicFlag` hook:
|
|
69
77
|
|
|
70
78
|
```tsx
|
|
71
79
|
import { useSchematicFlag } from "@schematichq/schematic-react";
|
|
80
|
+
import { Feature, Fallback } from "./components";
|
|
72
81
|
|
|
73
82
|
const MyComponent = () => {
|
|
74
83
|
const isFeatureEnabled = useSchematicFlag("my-flag-key");
|
|
@@ -77,6 +86,46 @@ const MyComponent = () => {
|
|
|
77
86
|
};
|
|
78
87
|
```
|
|
79
88
|
|
|
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:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import {
|
|
95
|
+
useSchematicEntitlement,
|
|
96
|
+
useSchematicIsPending,
|
|
97
|
+
} from "@schematichq/schematic-react";
|
|
98
|
+
import { Feature, Loader, NoAccess } from "./components";
|
|
99
|
+
|
|
100
|
+
const MyComponent = () => {
|
|
101
|
+
const schematicIsPending = useSchematicIsPending();
|
|
102
|
+
const {
|
|
103
|
+
featureAllocation,
|
|
104
|
+
featureUsage,
|
|
105
|
+
featureUsageExceeded,
|
|
106
|
+
value: isFeatureEnabled,
|
|
107
|
+
} = useSchematicEntitlement("my-flag-key");
|
|
108
|
+
|
|
109
|
+
// loading state
|
|
110
|
+
if (schematicIsPending) {
|
|
111
|
+
return <Loader />;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// usage exceeded state
|
|
115
|
+
if (featureUsageExceeded) {
|
|
116
|
+
return (
|
|
117
|
+
<div>
|
|
118
|
+
You have used all of your usage ({featureUsage} /{" "}
|
|
119
|
+
{featureAllocation})
|
|
120
|
+
</div>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// either feature state or "no access" state
|
|
125
|
+
return isFeatureEnabled ? <Feature /> : <NoAccess />;
|
|
126
|
+
};
|
|
127
|
+
```
|
|
128
|
+
|
|
80
129
|
## License
|
|
81
130
|
|
|
82
131
|
MIT
|