Non Programming Manager

    @syndicode/react-algolia-places

    2.1.1 • Public • Published

    @syndicode/react-algolia-places

    img

    Modern ReactJS component that provides functionality of Algolia Places.

    This component is different from other available in npm because it doesn't use Algolia's "places.js" package but rather use "algoliasearch" core package allowing you to use its power with your component's UI.

    Installation

    NOTE: "react" and "algoliasearch" aren't bundled within this package, so you have to install them separately.

    yarn add react algoliasearch
    yarn add @syndicode/react-algolia-places

    Usage

    <AlgoliaPlaces
      defaultValue={defaultValue}
      apiKey={process.env.REACT_APP_ALGOLIA_PLACES_API_KEY}
      appId={process.env.REACT_APP_ALGOLIA_PLACES_APP_ID}
      onSelect={objectID => {
        console.log(objectID);
      }}
      searchParams={searchParams}
    >
      {({ clear, error, loading, options, getInputProps, getOptionProps }) => (
        <>
          <input {...getInputProps()} />
          <ul>
            {options &&
              options.map(option => {
                // NOTE: you have to pass the option down to the getOptionProps() method
                return <li {...getOptionProps(option)} key={option.objectID}>{option.city}</li>;
              })}
          </ul>
        </>
      )}
    </AlgoliaPlaces>

    Component's props

    apiKey: String
    appId: String # Your algolia's app apiKey and appId
    defaultValue: String # Pass down objectID to prefetch result and fill in the input
    onSelect(objectID: String, option: Option): String #
    searchParams: searchParams
    render | children - render prop
    formatInputValue(hit: Hit): String - redefine default transformer for the inputs value on option select
    hitTransformer(hit: Hit): Option - redefine default transformer for formatted option
    

    Render props parameters

    clear() - change selected value to `null`, reset all search results
    error: Object -
    getInputProps() - method that creates props object to pass onto input element
    getOptionProps(option: Option) - method that creates props object to pass onto option component
    loading: Boolean - whether search request is in progress
    options: [Option] - list of formatted algolia places search results
    

    Types

    type Option {
      administrative: String
      city: String
      country: String
      county: String
      formatted: String # City, Country, Administrative, County
      objectID: String # id of the selected object
    }

    See algolia docs for more info

    Install

    npm i @syndicode/react-algolia-places

    DownloadsWeekly Downloads

    1

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    50.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • romikus
    • rusinov
    • rusinov-syndicode