diff --git a/components/README.md b/components/README.md new file mode 100644 index 00000000..39cb49f8 --- /dev/null +++ b/components/README.md @@ -0,0 +1,25 @@ +# schematic-components + +`schematic-components` provides client-side React components for customer portals, checkouts, and more using [Schematic](https://schematichq.com). It can be used in combination with [schematic-react](https://github.com/schematichq/schematic-js/tree/main/react), or on its own. + +## Install + +```bash +npm install @schematichq/schematic-components +# or +yarn add @schematichq/schematic-components +# or +pnpm add @schematichq/schematic-components +``` + +## Usage + +See the [Schematic documentation](https://docs.schematichq.com/components/set-up) for a full guide on how to set up and use Schematic components. + +## License + +MIT + +## Support + +Need help? Please open a GitHub issue or reach out to [support@schematichq.com](mailto:support@schematichq.com) and we'll be happy to assist. diff --git a/js/README.md b/js/README.md index 79c2da05..c8a58565 100644 --- a/js/README.md +++ b/js/README.md @@ -1,60 +1,88 @@ # schematic-js +`schematic-js` is a client-side JavaScript SDK for tracking event-based usage, identifying users, and checking flags using [Schematic](https://schematichq.com). + ## Install -``` -yarn install +```bash +npm install @schematichq/schematic-js +# or +yarn add @schematichq/schematic-js +# or +pnpm add @schematichq/schematic-js ``` -## Build +## Usage -``` -yarn build -``` +You can use Schematic to identify users; after this, your subsequent track events and flag checks will be associated with this user. -## Usage example +```typescript +import { Schematic } from "@schematichq/schematic-js"; -```javascript const schematic = new Schematic("your-api-key"); // Send an identify event -const userId = "my-user-id"; -const keys = { - id: userId, -}; -const traits = { - anykey: "anyval", -}; -const company = { - name: "My Company", - keys: { - id: "my-company-id", - }, - traits: { - location: "Atlanta, GA", - }, -}; -schematic.identify({ keys, traits, company }); - -// Send a track event -const event = "query"; -const traits = { -}; -const company = { -}; -const user = { -}, -schematic.track({ - event: "query", - traits: { - feature: "feat_cns2asuKAG2", - }, - company: { - id: "my-company-id", - }, - name: "My User", - user: { - id: "my-user-id", - }, +schematic.identify({ + keys: { + id: "my-user-id", + }, + traits: { + anykey: "anyval", + }, + company: { + name: "My Company", + keys: { + id: "my-company-id", + }, + traits: { + location: "Atlanta, GA", + }, + }, }); + +// Send a track event to record usage +schematic.track({ event: "query" }); + +// Check a flag +schematic.checkFlag("some-flag-key"); ``` + +By default, `checkFlag` will perform a network request to get the flag value for this user. If you'd like to check all flags at once in order to minimize network requests, you can use `checkFlags`: + +```typescript +import { Schematic } from "@schematichq/schematic-js"; + +const schematic = new Schematic("your-api-key"); + +schematic.identify({ + keys: { id: "my-user-id" }, + company: { + keys: { id: "my-company-id" }, + }, +}); + +schematic.checkFlags(); +``` + +Alternatively, you can run in websocket mode, which will keep a persistent connection open to the Schematic service and receive flag updates in real time: + +```typescript +import { Schematic } from "@schematichq/schematic-js"; + +const schematic = new Schematic("your-api-key", { useWebSocket: true}); + +schematic.identify({ + keys: { id: "my-user-id" }, + company: { keys: { id: "my-company-id" } }, +}); + +schematic.checkFlag("some-flag-key"); +``` + +## License + +MIT + +## Support + +Need help? Please open a GitHub issue or reach out to [support@schematichq.com](mailto:support@schematichq.com) and we'll be happy to assist. diff --git a/react/README.md b/react/README.md new file mode 100644 index 00000000..8a9c4d6c --- /dev/null +++ b/react/README.md @@ -0,0 +1,86 @@ +# schematic-react + +`schematic-react` is a client-side React library for [Schematic](https://schematichq.com) which provides hooks to track events, check flags, and more. `schematic-react` provides the same capabilities as [schematic-js](https://github.com/schematichq/schematic-js/tree/main/js), for React apps. + +## Install + +```bash +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: + +```tsx +import { SchematicProvider } from "@schematichq/schematic-react"; + +ReactDOM.render( + + + , + document.getElementById("root"), +); +``` + +To set the user context for events and flag checks, you can use the `identify` function provided by the `useSchematicEvents` hook: + +```tsx +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
My Component
; +}; +``` + +Once you've set the context with `identify`, you can track events: + +```tsx +import { useSchematicEvents } from "@schematichq/schematic-react"; + +const MyComponent = () => { + const { track } = useSchematicEvents(); + + useEffect(() => { + track({ event: "query" }); + }, []); + + return
My Component
; +}; +``` + +To check a flag, you can use the `useSchematicFlags` hook: + +```tsx +import { useSchematicFlag } from "@schematichq/schematic-react"; + +const MyComponent = () => { + const isFeatureEnabled = useSchematicFlag("my-flag-key"); + + return isFeatureEnabled ? : ; +}; +``` + +## License + +MIT + +## Support + +Need help? Please open a GitHub issue or reach out to [support@schematichq.com](mailto:support@schematichq.com) and we'll be happy to assist.