Skip to content

Platane/react-algolia-hoc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-algolia-hoc

Simple higher order component to use with Algolia search engine.

Also works great with Algolia Places.

npm

Demo

Some examples with fancy styling

... or others more bare bone with less noise.

Motivation

Algolia provides an awesome library of component to build on top of their API.

This is a great option to consider, but you may want to use just what you need.

Also you might find the module hard to integrate with your tool chain.

Especially algolia places which bundles a lot of stuff ( including a version of jQuery :{ ). Pretty bad for ssr.

Usage

The hoc holds the query in it's state, it provides a way to change it, and will request the results when it does change.

import { withAlgolia } from 'react-algolia-hoc'

// dumb component,
// expect to receive a list of hit, a callback to change the query, and the current query
const App = ({ hits, query, onQueryChange }) => (
  <div>
    <input
      type="text"
      value={query}
      onChange={e => onQueryChange(e.target.value)}
    />
    <ul>{hits.map(({ title }) => <li>{title}</li>)}</ul>
  </div>
)

// wrap the dumb component with the hoc
const config = {
  indexName: 'movies',
  ALGOLIA_APP_ID,
  ALGOLIA_API_KEY,
}
const StateFulApp = withAlgolia(config)(App)

Advanced Usage

request status

The hoc also provides the props pending which is true while a request is being processed.

It also provides loadMore callback to load more result from the same query, as well as props haveMore and nbHits.

filtering

Algolia supports complex filtering doc.

The hoc also provides a filters property, as well a onFiltersChange to handle this case.

filters is a string in a custom query language. It is super powerful but building the string can be tricky.

The library provides a utility function to parse / stringify a basic filters.

places

The places hoc have the same logic, it does not support filtering, nor loading more.

It gives places as returned by Algolia, which have a very loose type. I recommend to use the utility parseAddress function, which mimics what the official Algolia places library does.

API

withAlgolia

the hoc accepts as config:

  • indexName : string
  • ALGOLIA_APP_ID : string
  • ALGOLIA_API_KEY : string
  • hitsPerPage ?: number
  • delay ?: number : debounce delay on the onFilterChange, default to 100 ( ms )

The component accepts as props:

  • indexName : string will overwrite the config. /!\ at initialization only

The hoc injects as props:

  • pending : boolean
  • query : string
  • filters : string | null
  • hits : Hit[] : hit is whatever is in your index
  • nbHits : number
  • haveMore : boolean
  • onQueryChange : (query: string ) => void
  • onFilterChange : (filters: string | null) => void

withAlgoliaPlaces

the hoc accepts as config:

  • ALGOLIA_APP_ID : string
  • ALGOLIA_API_KEY : string
  • hitsPerPage ?: number
  • delay ?: number : debounce delay on the onFilterChange, default to 100 ( ms )
  • useDeviceLocation ?: boolean : request device location permission to narrow the search
  • language ?: string : language of the search, default to 'en'

The hoc injects as props:

  • pending : boolean
  • query : string
  • hits : Hit[] : addresses, as returned by Algolia search, consider using the parseAddress function to have consistent structure.
  • onQueryChange : (query: string ) => void

Releases

No releases published

Packages

No packages published