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
3import { SchematicProvider } from "@schematichq/schematic-react";
4
5ReactDOM.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:

1import { useSchematicEvents } from "@schematichq/schematic-react";
2
3const 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};

This call will upsert the company into Schematic, and set the context for the current session.

Check a flag

To check our 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("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:

Built with