@better-state/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { BetterStateProvider, useBetterStateClient } from "./provider.js";
+export { useBetterState } from "./use-better-state.js";
+export { useConnectionStatus } from "./use-connection-status.js";
+export type { BetterStateProviderProps } from "./provider.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { BetterStateProvider, useBetterStateClient } from "./provider.js";
+export { useBetterState } from "./use-better-state.js";
+export { useConnectionStatus } from "./use-connection-status.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/provider.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { type BetterStateClient, type ClientOptions } from "@better-state/client";
+export interface BetterStateProviderProps {
+    url: string;
+    options: ClientOptions;
+    children: ReactNode;
+}
+/**
+ * Provides a Better-State client to the component tree.
+ *
+ * @example
+ * ```tsx
+ * <BetterStateProvider url="http://localhost:3001" options={{ apiKey: 'your-key' }}>
+ *   <App />
+ * </BetterStateProvider>
+ * ```
+ */
+export declare function BetterStateProvider({ url, options, children }: BetterStateProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the Better-State client instance from the nearest provider.
+ * Useful for calling `client.disconnect()` or accessing advanced APIs.
+ */
+export declare function useBetterStateClient(): BetterStateClient;
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIhG,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAYvF;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAMxD"}

package/dist/provider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from "react";
+import { createClient } from "@better-state/client";
+const BetterStateContext = createContext(null);
+/**
+ * Provides a Better-State client to the component tree.
+ *
+ * @example
+ * ```tsx
+ * <BetterStateProvider url="http://localhost:3001" options={{ apiKey: 'your-key' }}>
+ *   <App />
+ * </BetterStateProvider>
+ * ```
+ */
+export function BetterStateProvider({ url, options, children }) {
+    const clientRef = useRef(null);
+    if (!clientRef.current) {
+        clientRef.current = createClient(url, options);
+    }
+    return (_jsx(BetterStateContext.Provider, { value: clientRef.current, children: children }));
+}
+/**
+ * Returns the Better-State client instance from the nearest provider.
+ * Useful for calling `client.disconnect()` or accessing advanced APIs.
+ */
+export function useBetterStateClient() {
+    const client = useContext(BetterStateContext);
+    if (!client) {
+        throw new Error("useBetterStateClient must be used within a <BetterStateProvider>");
+    }
+    return client;
+}
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,YAAY,EAA8C,MAAM,sBAAsB,CAAC;AAEhG,MAAM,kBAAkB,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAQzE;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAA4B;IACtF,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAEzD,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;QACvB,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IACjD,CAAC;IAED,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,YAClD,QAAQ,GACmB,CAC/B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAClC,MAAM,MAAM,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;IACtF,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/use-better-state.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Synced state hook — like `useState`, but shared across all connected clients.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const [count, setCount, updateCount] = useBetterState('counter', 0)
+ *
+ *   return (
+ *     <div>
+ *       <p>{count}</p>
+ *       <button onClick={() => updateCount(n => n + 1)}>+1</button>
+ *       <button onClick={() => setCount(0)}>Reset</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @param key - Unique state key (shared across all clients)
+ * @param initialValue - Default value if this key doesn't exist on the server yet
+ * @returns [value, set, update] — current value, setter, and updater function
+ */
+export declare function useBetterState<T>(key: string, initialValue: T): [T, (value: T) => void, (fn: (prev: T) => T) => void];
+//# sourceMappingURL=use-better-state.d.ts.map

package/dist/use-better-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-better-state.d.ts","sourceRoot":"","sources":["../src/use-better-state.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAuBvD"}

package/dist/use-better-state.js

@@ -0,0 +1,39 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useBetterStateClient } from "./provider.js";
+/**
+ * Synced state hook — like `useState`, but shared across all connected clients.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const [count, setCount, updateCount] = useBetterState('counter', 0)
+ *
+ *   return (
+ *     <div>
+ *       <p>{count}</p>
+ *       <button onClick={() => updateCount(n => n + 1)}>+1</button>
+ *       <button onClick={() => setCount(0)}>Reset</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @param key - Unique state key (shared across all clients)
+ * @param initialValue - Default value if this key doesn't exist on the server yet
+ * @returns [value, set, update] — current value, setter, and updater function
+ */
+export function useBetterState(key, initialValue) {
+    const client = useBetterStateClient();
+    const [value, setValue] = useState(initialValue);
+    const stateRef = useRef(null);
+    useEffect(() => {
+        const stateObj = client.state(key, initialValue);
+        stateRef.current = stateObj;
+        const unsub = stateObj.subscribe((v) => setValue(v));
+        return unsub;
+    }, [client, key]);
+    const set = useCallback((v) => stateRef.current?.set(v), []);
+    const update = useCallback((fn) => stateRef.current?.update(fn), []);
+    return [value, set, update];
+}
+//# sourceMappingURL=use-better-state.js.map

package/dist/use-better-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-better-state.js","sourceRoot":"","sources":["../src/use-better-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,cAAc,CAC5B,GAAW,EACX,YAAe;IAEf,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,YAAY,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAI,GAAG,EAAE,YAAY,CAAC,CAAC;QACpD,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAElB,MAAM,GAAG,GAAG,WAAW,CACrB,CAAC,CAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAClC,EAAE,CACH,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,EAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,EACpD,EAAE,CACH,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC;AAC9B,CAAC"}

package/dist/use-connection-status.d.ts

@@ -0,0 +1,14 @@
+import type { ConnectionStatus } from "@better-state/client";
+/**
+ * Returns the current connection status of the Better-State client.
+ *
+ * @example
+ * ```tsx
+ * function StatusBar() {
+ *   const status = useConnectionStatus()
+ *   return <div>{status === 'connected' ? '🟢' : '🔴'} {status}</div>
+ * }
+ * ```
+ */
+export declare function useConnectionStatus(): ConnectionStatus;
+//# sourceMappingURL=use-connection-status.d.ts.map

package/dist/use-connection-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-connection-status.d.ts","sourceRoot":"","sources":["../src/use-connection-status.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG7D;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAUtD"}

package/dist/use-connection-status.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { useBetterStateClient } from "./provider.js";
+/**
+ * Returns the current connection status of the Better-State client.
+ *
+ * @example
+ * ```tsx
+ * function StatusBar() {
+ *   const status = useConnectionStatus()
+ *   return <div>{status === 'connected' ? '🟢' : '🔴'} {status}</div>
+ * }
+ * ```
+ */
+export function useConnectionStatus() {
+    const client = useBetterStateClient();
+    const [status, setStatus] = useState(client.status());
+    useEffect(() => {
+        const unsub = client.onStatusChange((s) => setStatus(s));
+        return unsub;
+    }, [client]);
+    return status;
+}
+//# sourceMappingURL=use-connection-status.js.map

package/dist/use-connection-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-connection-status.js","sourceRoot":"","sources":["../src/use-connection-status.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAmB,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACzD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@better-state/react",
+  "version": "0.1.0",
+  "description": "React hooks for Better-State — real-time synced state with one line of code",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "keywords": ["react", "hooks", "state", "sync", "realtime", "websocket", "better-state"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Nathanim1919/better-state.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "@better-state/client": ">=0.1.0",
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@better-state/client": "workspace:*",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
+}