@teamkeel/client-react 0.357.1

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@teamkeel/client-react",
+  "version": "0.357.1",
+  "description": "React helpers for Keel clients",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "npm run build"
+  },
+  "keywords": [],
+  "author": "Keel (www.keel.so)",
+  "license": "ASL (Apache 2.0)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "react": "18.2.0",
+    "typescript": "5.1.6"
+  }
+}

package/pnpm-lock.yaml

@@ -0,0 +1,71 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+devDependencies:
+  '@types/react':
+    specifier: 18.2.0
+    version: 18.2.0
+  '@types/react-dom':
+    specifier: 18.2.0
+    version: 18.2.0
+  react:
+    specifier: 18.2.0
+    version: 18.2.0
+  typescript:
+    specifier: 5.1.6
+    version: 5.1.6
+
+packages:
+
+  /@types/prop-types@15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
+
+  /@types/react-dom@18.2.0:
+    resolution: {integrity: sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==}
+    dependencies:
+      '@types/react': 18.2.0
+    dev: true
+
+  /@types/react@18.2.0:
+    resolution: {integrity: sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: true
+
+  /@types/scheduler@0.16.3:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: true
+
+  /csstype@3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
+
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: true
+
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
+  /typescript@5.1.6:
+    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true

package/readme.md

@@ -0,0 +1,39 @@
+# @teamkeel/client-react
+
+Typed useKeel Hook from a generated Keel client
+
+## Install
+
+```
+npm i @teamkeel/client-react
+```
+
+## Usage
+
+Export the `KeelProvider` and `useKeel` components based on your generated client.
+
+N.B. [See here](https://docs.keel.so/apis/client) for documentation on generating a client 
+
+```ts
+import { APIClient } from "../keelClient";
+export const { KeelProvider, useKeel } = keel(APIClient);
+
+```
+
+Wrap your app with the exported `KeelProvider`
+
+```tsx
+
+<KeelProvider endpoint="https://myproject.keelapps.xyz/api/">
+	<App />
+</KeelProvider>
+
+```
+
+Now you can use the typed `useKeel` hook in any component within your app
+
+```ts
+function MyComponent() {
+	const keel = useKeel();
+}
+```

package/src/index.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useEffect, useRef } from "react";
+
+interface KeelContextType<T> {
+  client: T;
+}
+
+const KeelContext = createContext<KeelContextType<any>>({
+  client: null,
+});
+
+interface KeelProviderProps<
+  T extends new (...args: any[]) => any,
+  U = Omit<ConstructorParameters<T>[0], "endpoint">
+> {
+  /**
+   * The endpoint URL for the client.
+   */
+  endpoint: string;
+  /**
+   * Additional config options for the client.
+   */
+  config?: U;
+  children: React.ReactNode;
+}
+
+export const keel = <T extends new (...args: any[]) => any>(Client: T) => {
+  function KeelProvider<T extends new (...args: any[]) => any>({
+    endpoint,
+    config,
+    children,
+  }: KeelProviderProps<T>) {
+    if (typeof Client !== "function") {
+      throw new Error("Client must be a Keel class");
+    }
+
+    const clientConstructor = Client as new (args: any) => any;
+    const clientArgs = { endpoint, ...config };
+    const clientRef = useRef(new clientConstructor(clientArgs));
+
+    const client = clientRef.current;
+
+    useEffect(() => {
+      client._setEndpoint(endpoint);
+    }, [endpoint, client]);
+
+    return (
+      <KeelContext.Provider value={{ client }}>{children}</KeelContext.Provider>
+    );
+  }
+
+  return {
+    KeelProvider: KeelProvider<T>,
+    useKeel: useKeel<T>,
+  };
+};
+
+function useKeel<T extends new (...args: any) => any>() {
+  const keelContext = useContext<KeelContextType<InstanceType<T>>>(KeelContext);
+
+  if (!keelContext) {
+    throw new Error("useKeel must be used within a KeelProvider");
+  }
+
+  return keelContext.client;
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "jsx": "react",
+    "lib": ["ESNext", "dom"],
+    "esModuleInterop": true,
+    "sourceMap": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}