READMEs (#72)

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.

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.

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(
+    <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:
+
+```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 <div>My Component</div>;
+};
+```
+
+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 <div>My Component</div>;
+};
+```
+
+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 ? <Feature /> : <Fallback />;
+};
+```
+
+## 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.