Brug af Infer React SDK

Usage

The Pro6PPInfer component provides a styled address autocomplete input.

React (TSX)

import React from 'react';
import { Pro6PPInfer } from '@pro6pp/infer-react';

const AddressForm = () => {
  return (
    <div className="form-group">
      <label>Search Address</label>
      <Pro6PPInfer
        authKey="YOUR_AUTH_KEY"
        country="NL"
        onSelect={(selection) => console.log('Selected:', selection)}
        placeholder="Type a Dutch address..."
      />
    </div>
  );
};

Place suggestions are opt-in. Pass types="place" or types="address,place" and handle the selected PlaceValue with onPlaceSelect; omitting types keeps address-only behavior. Use supportsInferPlaces(country) or INFER_PLACES_COUNTRIES to check country support.

The useInfer hook exposes place results through state.places and state.selectedPlace, and provides setPlace(place) for programmatic selection. PlaceValue includes the place ID, name, category, address fields, and coordinates.

React (TSX)

<Pro6PPInfer
  authKey="YOUR_AUTH_KEY"
  country="NL"
  types="address,place"
  onPlaceSelect={(place) => console.log('Selected place:', place)}
/>

The component accepts the following props, and forwards its ref to the input element:

Alle props med typer og standardværdier står i Reference.

Styling

By default, the component auto-injects the necessary CSS. You have several options:

Option 1: Use auto-injected styles (default)

No extra setup needed. The CSS is embedded and injected automatically.

Option 2: Import CSS separately

If you prefer to import the CSS file directly:

React (TSX)

import { Pro6PPInfer } from '@pro6pp/infer-react';
import '@pro6pp/infer-react/styles.css';

<Pro6PPInfer
  authKey="..."
  country="NL"
  disableDefaultStyles // disable auto-injection since we imported the CSS
/>;

Option 3: Fully custom styles

Set disableDefaultStyles and provide your own CSS targeting the .pro6pp-* classes:

React (TSX)

<Pro6PPInfer authKey="..." country="NL" disableDefaultStyles className="my-custom-wrapper" />

Headless Hook

Alternatively, you can use the headless useInfer hook. This hook handles all the logic (state, API calls, debouncing, keyboard navigation), but allows you to build your own custom UI. getOrderedItems(state) returns the suggestions in the order that keyboard navigation follows, and state.selectedSuggestionIndex is the index of the highlighted one.

React (TSX)

import React from 'react';
import { getOrderedItems, useInfer } from '@pro6pp/infer-react';

const CustomAddressForm = () => {
  const { state, inputProps, selectItem } = useInfer({
    authKey: 'YOUR_AUTH_KEY',
    country: 'NL',
    limit: 5,
  });
  const items = getOrderedItems(state);

  return (
    <div className="address-autocomplete">
      <label htmlFor="address">Address</label>

      {/* inputProps contains value, onChange, and onKeyDown */}
      <input
        id="address"
        {...inputProps}
        placeholder="Type an address..."
        className="my-input-class"
      />

      {state.isLoading && <div className="spinner">Loading...</div>}

      {/* render the dropdown */}
      {items.length > 0 && (
        <ul className="my-dropdown-class" role="listbox">
          {items.map((item, index) => (
            <li
              key={`${item.label}-${index}`}
              role="option"
              aria-selected={index === state.selectedSuggestionIndex}
              className={index === state.selectedSuggestionIndex ? 'active' : undefined}
              onClick={() => selectItem(item)}
            >
              {item.label}
              {item.subtitle && <small>, {item.subtitle}</small>}
            </li>
          ))}
        </ul>
      )}

      {state.isValid && <p>Valid selection made.</p>}
    </div>
  );
};

The hook accepts the same search options, callbacks and initialValue as the component, and returns:

Alle medlemmer af instansen med deres typer står i Reference.