Setup the SDK

Integrate the Schematic SDK into your application

The schematic-react SDK is a client-side React library for Schematic which provides hooks to track events, check flags, and more.

Install

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

Usage

SchematicProvider

Similar to libraries like Clerk, Use the SchematicProvider to wrap your application and provide the Schematic instance to all components:

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

At this time, the React SDK only supports client-side rendering.

You can generate a publishable key from the Schematic Dashboard. These keys look like api_... and are meant to be used client-side.

Generating API keys in Schematic

Identifying the user with Schematic

To set the user context for events and flag checks, you can use the identify function provided by the useSchematicEvents hook. The example below assumes your company has an application id of company123. This will upsert the company into Schematic, and set the context for the current web session (i.e. later calls will operate on this company).

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

See Key Management for more information on keys and how to use them in Schematic.

Check a flag

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

1 import { useSchematicFlag } from "@schematichq/schematic-react";
2 import { Feature, Fallback } from "./components";
3 
4 const MyComponent = () => {
5   const isFeatureEnabled = useSchematicFlag("mechanical-keyboard");
6 
7   return isFeatureEnabled ? "Cherry MX Blues" : "1990's Logitech Keyboard";
8 };

Next Steps!

Congrats 🎉! Now you have the basics setup to start using Schematic.

If you’d like to dig deeper into our SDK and platform, here are a few places to start:

If you’d like to learn more about how Schematic can build and manage your pricing and billing, here are a few places to start:

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

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

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

1	import { useSchematicFlag } from "@schematichq/schematic-react";
2	import { Feature, Fallback } from "./components";
3
4	const MyComponent = () => {
5	const isFeatureEnabled = useSchematicFlag("mechanical-keyboard");
6
7	return isFeatureEnabled ? "Cherry MX Blues" : "1990's Logitech Keyboard";
8	};