# useLocationSuggestions

*Category:* Utilities
*Section:* UI state & input hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocationSuggestions
*Captured:* 2026-04-27T14:59:43.359Z

The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.

## useLocationSuggestions

### Example: Example 1

Here map location search

#### React (tsx)

```tsx
import { useState } from 'react';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../../components/map/uikit_demo_credentials';
import AutoSuggest, { type AutoSuggestSuggestion } from '@rio-cloud/rio-uikit/AutoSuggest';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import useLocationSuggestions from '@rio-cloud/rio-uikit/useLocationSuggestions';

export default () => {
    const [searchValue, setSearchValue] = useState('');

    const { suggestions, loading, error } = useLocationSuggestions(searchValue, {
        apiKey: UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT.apikey,
        limit: 20, // optional, but has to be between 5...20
        lang: 'de-DE', // optional
        // ... Add any additional options dynamically. See API documentation - https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1autocomplete/get
    });

    const handleSuggestionsFetchRequested = (result: { value: string }) => {
        setSearchValue(result.value);
    };

    const renderSuggestion = (suggestion: AutoSuggestSuggestion) => <span>{suggestion.label}</span>;

    const inputProps = {
        icon: 'rioglyph rioglyph-search',
        placeholder: 'Search for location',
        value: searchValue,
    };

    return (
        <div className='max-width-600'>
            <FormLabel htmlFor='locationAutosuggest'>Here map location search</FormLabel>
            <AutoSuggest
                id='locationAutosuggest'
                inputProps={inputProps}
                suggestions={suggestions}
                onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
                renderSuggestion={renderSuggestion}
                isLoading={loading}
                openOnFocus={false}
            />
            {error && <div>{error.message}</div>}
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-600">
    <label for="locationAutosuggest" class="display-inline-block">
        <span>Here map location search</span>
    </label>
    <div class="AutoSuggest dropdown">
        <div class="input-group width-100pct">
            <span class="input-group-addon">
                <span class="rioglyph rioglyph rioglyph-search" aria-hidden="true">
                </span>
            </span>
            <div class="ClearableInput input-group">
                <input id="locationAutosuggest" placeholder="Search for location" class="form-control" autocomplete="off" type="text" tabindex="0" value="">
                <span class="clearButton hide">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| query | string | — | The user input string to search for location suggestions. |
| options | object | — | Optional configuration for the hook. |
| └apiKey | string | — | Your HERE Maps API key. Defaults to "YOUR_API_KEY" if not provided. |
| └fetchUrl | string | — | Optional override for the autocomplete endpoint URL. Defaults to HERE Maps API URL. |
| └limit | number | 5 | Optional value to define the result limit (between 5 and 20). |
| └...additionalOptions | unknown | — | Pass in any additional option for the fetch API. |

#### Props: Returns

### Returns

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| suggestions | LocationSuggestion[] | — | An array of suggestion objects containing an id and label. |
| loading | boolean | — | Indicates whether the suggestions are currently being fetched. |
| error | Error \| null | — | Error object if the fetch fails, otherwise null. |