Headless React one-field input for the Pro6PP Infer API.
npm install @pro6pp/infer-reactReact Hook for the Pro6PP Infer API.
A headless library to build custom address autocomplete components in React.
``bash`
npm install @pro6pp/infer-react
The Pro6PPInfer component provides a styled address autocomplete input.
`tsx
import React from 'react';
import { Pro6PPInfer } from '@pro6pp/infer-react';
const AddressForm = () => {
return (
You can customize the appearance of the component via the following props:
| Prop | Description |
| :--------------------- | :---------------------------------------------------------------------------------------- |
|
| Optional CSS class name for the wrapper div. |
| disableDefaultStyles | If true, prevents the automatic injection of the default CSS theme. |
| placeholder | Custom placeholder text for the input field. |
| noResultsText | The text to display when no suggestions are found. |
| renderItem | A custom render function for suggestion items, receiving the item and isActive state. |
| renderNoResults | A custom render function for the empty state, receiving the current state. |
| debounceMs | Delay in ms before API search. Defaults to 150 (min 50). |
| maxRetries | Maximum retry attempts for transient network errors. Valid range: 0 to 10. |
| showClearButton | If true, displays a button to empty the input field. Defaults to true. |
| loadingText | The text displayed at the bottom of the list when fetching more results. |---
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.`tsx
import React from 'react';
import { useInfer } from '@pro6pp/infer-react';const CustomAddressForm = () => {
const { state, inputProps, selectItem } = useInfer({
authKey: 'YOUR_AUTH_KEY',
country: 'NL',
limit: 5,
});
return (
{/ inputProps contains value, onChange, and onKeyDown /}
{state.isLoading &&
Loading...} {/ render the dropdown /}
{(state.suggestions.length > 0 || state.cities.length > 0) && (
{/ render cities /}
{state.cities.map((city, i) => (
- city-${i}
} onClick={() => selectItem(city)}>
{city.label} (City)
))} {/ render streets /}
{state.streets.map((street, i) => (
- street-${i}
} onClick={() => selectItem(street)}>
{street.label} (Street)
))} {/ render general suggestions /}
{state.suggestions.map((item, i) => (
- suggestion-${i}
} onClick={() => selectItem(item)}>
{item.label}
))}
)} {state.isValid &&
Valid address selected.
}
);
};
``