React

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

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);

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};

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};

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

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

License

MIT

Support

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