Giter VIP home page Giter VIP logo

react-algolia-places's Introduction

@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

react-algolia-places's People

Contributors

dependabot[bot] avatar haroenv avatar rusinovanton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

haroenv

react-algolia-places's Issues

Feedback

Hi! I like the idea of this package a lot. Since I work on InstantSearch I noticed some thing you decided to do differently, so I'll note here what I noticed. Feel free to just close or take it into account.

  1. algoliasearch is a peer dependency

This avoids you coupling with a certain version of the client, which is cool, but also has no real clear warning. I would suggest this instead:

<AlgoliaPlaces searchClient={algoliasearch(xxx)} />

This will also make it easier for people who are using a custom client, or later a different major version of the client.

  1. hitTransformer naming

In InstantSearch we call this transformItems. No big deal, but maybe you want to align on that

  1. search only on second character

This seems to be done on purpose, however it surprised me. I searched a few times for single characters before realising only the second one was taken in account

  1. demo

I like to try things out live when I see a package. You can add a folder in the project with an example (doesn't need to be more complex than https://codesandbox.io/s/bold-mccarthy-ljh22). Then you can link to https://codesandbox.io/s/github/tree/master/xxx-name-of-your-folder

  1. API

I see you're using modern React API like hooks. I think that gives a nice API too:

const {
 clear,
    error,
    loading,
    options,
    getInputProps,
    getOptionProps,
} = usePlaces({searchClient: algoliasearch(...), ...otherOptions });
  1. React has a wrong peer dependency

Hooks were introduced in 16.8.0, so that should be the peerDependency instead, I'll make a PR for that. EDIT: I misread 16.11.0 as 16.1.0

Have a nice day!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.