1.0.2 • Published 8 months ago

@schematichq/schematic-react v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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.

1.0.2

8 months ago

1.0.0

9 months ago

1.0.0-rc.0

10 months ago

0.2.0-rc.10

10 months ago

0.2.0-rc.7

10 months ago

0.2.0-rc.6

10 months ago

0.2.0-rc.9

10 months ago

0.2.0-rc.8

10 months ago

0.2.0-rc.5

10 months ago

0.2.0-rc.4

10 months ago

0.2.0-rc.3

10 months ago

0.2.0-rc.2

10 months ago

0.2.0-rc.1

11 months ago

0.2.0-rc.0

11 months ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago