Nationwide Polamorous Matrimony

    tomtom-react-searchbox

    0.2.1 • Public • Published

    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

    • 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:

        <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>

    Install

    npm i tomtom-react-searchbox

    DownloadsWeekly Downloads

    7

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    75.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • falseinput