Infer Core SDK gebruiken

Usage

The core logic is exposed via the InferCore class. It manages the API requests, state and parses input.

Using ES Modules

TypeScript

import { InferCore } from '@pro6pp/infer-core';

const core = new InferCore({
  authKey: 'YOUR_AUTH_KEY',
  country: 'NL',
  onStateChange: (state) => {
    // suggestions, isLoading, isValid, value, selectedSuggestionIndex, etc.
    console.log('Current State:', state);
  },
  onSelect: (result) => {
    console.log('User selected:', result);
  },
});

Place suggestions are opt-in. Set types to place or address,place. Results are available in state.places, and the selected value in state.selectedPlace; use onPlaceSelect for selection events. Leaving types unset keeps the address-only request and response behavior. Use supportsInferPlaces(country) or INFER_PLACES_COUNTRIES to check country support. The exported PlaceValue type contains the place ID, name, category, address fields, and coordinates.

TypeScript

const core = new InferCore({
  authKey: 'YOUR_AUTH_KEY',
  country: 'NL',
  types: 'address,place',
  onPlaceSelect: (place) => console.log('Selected place:', place),
});

Using via script tag (global)

JavaScript

const core = new Pro6PPCore.InferCore({
  authKey: 'YOUR_AUTH_KEY',
  country: 'NL',
  onSelect: (result) => console.log(result),
});

Event handling

Once initialized, pass your input and keyboard events to the core instance to manage state.

TypeScript

import type { InferResult } from '@pro6pp/infer-core';

const input = document.querySelector<HTMLInputElement>('#my-input')!;

// pass input events to the core
input.addEventListener('input', () => {
  core.handleInput(input.value);
});

// pass keyboard events
input.addEventListener('keydown', (e) => {
  core.handleKeyDown(e);
});

// handle clicks
function onSuggestionClick(item: InferResult) {
  core.selectItem(item);
}