tomtom-react-searchbox

Customizable searchbox component powered by Tomtom search for your React application.


This component wraps Tomtom Fuzzy Search service. You will need to provide your own API key to make it work.

Installation

``
npm i --save tomtom-react-searchbox
`

`jsx
import SearchBox from 'tomtom-react-searchbox';

const Example = () =>
onResultChoose={(result) => console.log(result)}
searchOptions={{
key: '',
language: 'en-Gb',
limit: 5,
typeahead: true
}}
/>;
`

Props

* searchOptions {Object}
* [placeholder] {String}
* [autofocus] {Boolean}
* [components] {Object}
* [wrapperClassName] {String}
* [onResultSelect] {Function}
* [onResultChoose] {Function}
* [onResultsFetch] {Function}
* [onChange] {Function}

Styling

Use wrapperClassName prop to pass custom class name to container div. Then you can override css classes. The structure looks like this:

`html


You can use components prop to override internal components of the SearchBox. You can also access original ones by importing them as shown in this example.
`jsx
import Searchbox, {
components
} from 'tomtom-react-searchbox';

function CustomResult(props) {
return (
className={my-result ${props.isSelected ? '-selected' : ''}}>