schematic-react is a client-side React library for Schematic which provides hooks to track events, check flags, and more. schematic-react provides the same capabilities as schematic-js, for React apps.

Install

$npm install @schematichq/schematic-react
># or
>yarn add @schematichq/schematic-react
># or
>pnpm add @schematichq/schematic-react

Usage

SchematicProvider

You can use the SchematicProvider to wrap your application and provide the Schematic instance to all components:

1import { SchematicProvider } from "@schematichq/schematic-react";
2
3ReactDOM.render(
4 <SchematicProvider publishableKey="your-publishable-key">
5 <App />
6 </SchematicProvider>,
7 document.getElementById("root"),
8);

Setting context

To set the user context for events and flag checks, you can use the identify function provided by the useSchematicEvents hook:

1import { useSchematicEvents } from "@schematichq/schematic-react";
2
3const MyComponent = () => {
4 const { identify } = useSchematicEvents();
5
6 useEffect(() => {
7 identify({
8 keys: { id: "my-user-id" },
9 company: {
10 keys: { id: "my-company-id" },
11 traits: { location: "Atlanta, GA" },
12 },
13 });
14 }, []);
15
16 return <div>My Component</div>;
17};

Tracking usage

Once you’ve set the context with identify, you can track events:

1import { useSchematicEvents } from "@schematichq/schematic-react";
2
3const MyComponent = () => {
4 const { track } = useSchematicEvents();
5
6 useEffect(() => {
7 track({ event: "query" });
8 }, []);
9
10 return <div>My Component</div>;
11};

Checking flags

To check a flag, you can use the useSchematicFlag hook:

1import { useSchematicFlag } from "@schematichq/schematic-react";
2import { Feature, Fallback } from "./components";
3
4const MyComponent = () => {
5 const isFeatureEnabled = useSchematicFlag("my-flag-key");
6
7 return isFeatureEnabled ? <Feature /> : <Fallback />;
8};

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:

1import {
2 useSchematicEntitlement,
3 useSchematicIsPending,
4} from "@schematichq/schematic-react";
5import { Feature, Loader, NoAccess } from "./components";
6
7const MyComponent = () => {
8 const schematicIsPending = useSchematicIsPending();
9 const {
10 featureAllocation,
11 featureUsage,
12 featureUsageExceeded,
13 value: isFeatureEnabled,
14 } = useSchematicEntitlement("my-flag-key");
15
16 // loading state
17 if (schematicIsPending) {
18 return <Loader />;
19 }
20
21 // usage exceeded state
22 if (featureUsageExceeded) {
23 return (
24 <div>
25 You have used all of your usage ({featureUsage} /{" "}
26 {featureAllocation})
27 </div>
28 );
29 }
30
31 // either feature state or "no access" state
32 return isFeatureEnabled ? <Feature /> : <NoAccess />;
33};

License

MIT

Support

Need help? Please open a GitHub issue or reach out to support@schematichq.com and we’ll be happy to assist.

Built with