@schematichq/schematic-react v1.0.2
schematic-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:
import { SchematicProvider } from "@schematichq/schematic-react";
ReactDOM.render(
<SchematicProvider publishableKey="your-publishable-key">
<App />
</SchematicProvider>,
document.getElementById("root"),
);
To set the user context for events and flag checks, you can use the identify
function provided by the useSchematicEvents
hook:
import { useSchematicEvents } from "@schematichq/schematic-react";
const MyComponent = () => {
const { identify } = useSchematicEvents();
useEffect(() => {
identify({
keys: { id: "my-user-id" },
company: {
keys: { id: "my-company-id" },
traits: { location: "Atlanta, GA" },
},
});
}, []);
return <div>My Component</div>;
};
Once you've set the context with identify
, you can track events:
import { useSchematicEvents } from "@schematichq/schematic-react";
const MyComponent = () => {
const { track } = useSchematicEvents();
useEffect(() => {
track({ event: "query" });
}, []);
return <div>My Component</div>;
};
To check a flag, you can use the useSchematicFlags
hook:
import { useSchematicFlag } from "@schematichq/schematic-react";
const MyComponent = () => {
const isFeatureEnabled = useSchematicFlag("my-flag-key");
return isFeatureEnabled ? <Feature /> : <Fallback />;
};
License
MIT
Support
Need help? Please open a GitHub issue or reach out to support@schematichq.com and we'll be happy to assist.
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago