@pro6pp/infer-react 0.0.2-beta.0

package/README.md

@@ -0,0 +1,63 @@
+# @pro6pp/infer-react
+
+React Hook for the [Pro6PP Infer API](https://www.pro6pp.com/developer/infer/nl/parameters).
+A headless library to build custom address autocomplete components in React.
+
+## Installation
+
+```bash
+npm install @pro6pp/infer-react
+```
+
+## Usage
+
+This library handles all the logic (state, API calls, debouncing) but doesn't render anything. You are responsible for rendering the input and the dropdown list using your own styling.
+
+```tsx
+import React from 'react';
+import { useInfer } from '@pro6pp/infer-react';
+
+const AddressForm = () => {
+  const { state, inputProps, selectItem } = useInfer({
+    authKey: 'YOUR_AUTH_KEY',
+    country: 'NL',
+    limit: 5,
+  });
+
+  return (
+    <div className="address-autocomplete">
+      <label>Address</label>
+
+      <input {...inputProps} placeholder="Type a Dutch address..." className="my-input-class" />
+
+      {/* render the dropdown */}
+      {(state.suggestions.length > 0 || state.cities.length > 0) && (
+        <ul className="my-dropdown-class">
+          {/* render cities, if any */}
+          {state.cities.map((city, i) => (
+            <li key={`city-${i}`} onClick={() => selectItem(city)}>
+              <strong>{city.label}</strong> (City)
+            </li>
+          ))}
+
+          {/* render streets, if any */}
+          {state.streets.map((street, i) => (
+            <li key={`street-${i}`} onClick={() => selectItem(street)}>
+              <strong>{street.label}</strong> (Street)
+            </li>
+          ))}
+
+          {/* render general suggestions */}
+          {state.suggestions.map((item, i) => (
+            <li key={`sugg-${i}`} onClick={() => selectItem(item)}>
+              {item.label}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {state.isValid && <p>Valid address selected</p>}
+    </div>
+  );
+};
+```

package/dist/index.d.mts

@@ -0,0 +1,24 @@
+import { InferConfig, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
+
+/**
+ * Hook for the Pro6PP Infer API.
+ * @param config - The API configuration.
+ * @returns An object containing the current state, input helpers, and selection handler.
+ * @example
+ * const { state, inputProps, selectItem } = useInfer({
+ *   authKey: 'YOUR_KEY',
+ *   country: 'NL'
+ * });
+ */
+declare function useInfer(config: InferConfig): {
+    state: InferState;
+    core: InferCore;
+    inputProps: {
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    };
+    selectItem: (item: InferResult | string) => void;
+};
+
+export { useInfer };

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { InferConfig, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
+
+/**
+ * Hook for the Pro6PP Infer API.
+ * @param config - The API configuration.
+ * @returns An object containing the current state, input helpers, and selection handler.
+ * @example
+ * const { state, inputProps, selectItem } = useInfer({
+ *   authKey: 'YOUR_KEY',
+ *   country: 'NL'
+ * });
+ */
+declare function useInfer(config: InferConfig): {
+    state: InferState;
+    core: InferCore;
+    inputProps: {
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    };
+    selectItem: (item: InferResult | string) => void;
+};
+
+export { useInfer };

package/dist/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useInfer: () => useInfer
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_infer_core = require("@pro6pp/infer-core");
+function useInfer(config) {
+  const [state, setState] = (0, import_react.useState)(import_infer_core.INITIAL_STATE);
+  const core = (0, import_react.useMemo)(() => {
+    return new import_infer_core.InferCore({
+      ...config,
+      onStateChange: (newState) => setState({ ...newState })
+    });
+  }, [config.country, config.authKey, config.limit]);
+  return {
+    state,
+    core,
+    inputProps: {
+      value: state.query,
+      onChange: (e) => core.handleInput(e.target.value),
+      onKeyDown: (e) => core.handleKeyDown(e)
+    },
+    selectItem: (item) => core.selectItem(item)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useInfer
+});

package/dist/index.mjs

@@ -0,0 +1,25 @@
+// src/index.ts
+import { useState, useMemo } from "react";
+import { InferCore, INITIAL_STATE } from "@pro6pp/infer-core";
+function useInfer(config) {
+  const [state, setState] = useState(INITIAL_STATE);
+  const core = useMemo(() => {
+    return new InferCore({
+      ...config,
+      onStateChange: (newState) => setState({ ...newState })
+    });
+  }, [config.country, config.authKey, config.limit]);
+  return {
+    state,
+    core,
+    inputProps: {
+      value: state.query,
+      onChange: (e) => core.handleInput(e.target.value),
+      onKeyDown: (e) => core.handleKeyDown(e)
+    },
+    selectItem: (item) => core.selectItem(item)
+  };
+}
+export {
+  useInfer
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pro6pp/infer-react",
+  "version": "0.0.2-beta.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "dependencies": {
+    "@pro6pp/infer-core": "0.0.2-beta.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.d-centralize.nl/dc/pro6pp/pro6pp-infer-sdk"
+  }
+}