SearchstaxLocationWidget React

SearchStax Site Search solution offers a React search-location widget to assist with your custom search page.

The SearchstaxLocationWidget provides a location search input with location-based search functionality.

Usage

function locationDecodeFunction(term: string): Promise<ISearchstaxLocation>{
        return new Promise((resolve) => {
          // make a request to geocoding API to retrieve lat, lon and address and then resolve promise
      resolve({
                  address:'Address',
                  lat: lat,
                  lon: lon,
                  error: false
                });
        });
  }
 <SearchstaxLocationWidget hooks={{locationDecode: locationDecodeFunction} } />

Props

  • hooks.locationDecode – Callback function invoked after location input blurs and is used to decode string to coordinates.

Template Override

searchLocationTemplate

Allows customizing the location UI.

Template props:

  • locationData – data containing info on when to show certain elements
  • inputValue – value of location input
  • locationBlur – Handler for location input blur
  • radiusChange – Handler for location radius change
  • selectValue – Value of radius select
  • inputChange – location input change handler
  • locationError – boolean stating if location has error
  • getCurrentLocation – Handler for getting current location from browser

Usage

<SearchstaxLocationWidget hooks={{locationDecode:locationDecode} } />

Example

function LocationTemplate(
    locationData: null | ISearchstaxLocationRenderData,
    locationChange: (value: string) => void,
    locationBlur: (value: string) => void,
    radiusChange: (value: string | number) => void,
    getCurrentLocation: () => void,
    inputValue?: string | null,
    selectValue?: string | number | undefined,
    locationError?: boolean
  ): React.ReactElement {
    return (
     <>
        {locationData && (
          <div
            className="searchstax-location-input-container"
            data-test-id="searchstax-location-input-container"
          >
            <div className="searchstax-location-input-wrapper">
              <span className="searchstax-location-input-label">NEAR</span>
              <div className="searchstax-location-input-wrapper-inner">
                <input
                  type="text"
                  id="searchstax-location-input"
                  className={"searchstax-location-input" + (locationError ? " searchstax-input-location-error" : "")}
                  placeholder="Zip, Postal Code or City..."
                  aria-label="Search Location Input"
                  data-test-id="searchstax-location-input"
                  value={inputValue ?? ""}
                  onChange={(e) => locationChange(e.target.value)}
                  onBlur={(e) => locationBlur(e.target.value)}
                />
                <button onClick={getCurrentLocation} className="searchstax-get-current-location-button">Use my current location</button>
              </div>
              {locationData.shouldShowLocationDistanceDropdown && (
                <span className="searchstax-location-input-label">WITHIN</span>
              )}
              {locationData.shouldShowLocationDistanceDropdown && (
                <select
                  id="searchstax-location-radius-select"
                  className="searchstax-location-radius-select"
                  aria-label="Search Location Radius Select"
                  data-test-id="searchstax-location-radius-select"
                  onChange={(e) => radiusChange(e.target.value)}
                  value={selectValue}
                >
                  {locationData.locationSearchDistanceValues.map(
                    ({ value, label }) => (
                      <option value={value} key={value}>
                        {label}
                      </option>
                    )
                  )}
                </select>
              )}
            </div>
          </div>
        )}
    </>)
  }
<SearchstaxLocationWidget searchLocationTemplate={LocationTemplate} hooks={{locationDecode:locationDecode} } />

Questions?

Do not hesitate to contact the SearchStax Support Desk.