0.2.1 • Published 4 years ago

tomtom-react-searchbox v0.2.1

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

tomtom-react-searchbox

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

build coverage

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
import SearchBox from 'tomtom-react-searchbox';

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

Props

Styling

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

    <div class="react-searchbox">
        <div class="react-searchbox__input-wrapper">
            <input class="react-searchbox__input" />
        </div>
        <div class="react-searchbox__results">
            <div class="react-searchbox__result"></div>
            <div class="react-searchbox__result"></div>
            ...
        </div>
    </div>

Components API

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.

import Searchbox, {
    components
  } from 'tomtom-react-searchbox';

  function CustomResult(props) {
    return (
      <div
        className={`my-result ${props.isSelected ? '-selected' : ''}`}>
        <div className="icon">❤</div>
        <components.Result {...props} />
      </div>
    );
  }

  <Searchbox
    components={{
        Result: CustomResult
    }}
    searchOptions={{
        key: '<your-api-key>',
        language: 'en-Gb',
        limit: 5,
        typeahead: true,
        categorySet: '7315'
    }} />
  </div>