@watermarkchurch/react-instantsearch-components NP

`@watermarkchurch/react-instantsearch-components`

For Watermark internal use only

Exports a number of React components that are commonly used across our apps to execute searches with Algolia.

Versioning note:

All versions less than v1.0 are compatible with react-instantsearch v5

Versions >= v6.0 share a major version with the version of react-instantsearch with which it is compatible.

AlgoliaSearch

import {AlgoliaSearch} from '@watermarkchurch/react-instantsearch-components'

<AlgoliaSearch
  apiKey="[string]"
  appId="[string]"
  indexName="[string]"
  widgetName="[string]"
  storeStateInQuery={true}
  onSearchStateChange={(searchState) => {...}}>

apiKey: the Algolia API key with search access to the specified index
appId: The Algolia app ID
indexName: The name of the index to search
widgetName: A class to be applied to the wrapper div
storeStateInQuery:
set to true to have the search state serialized to the query string. This enables direct linking to search queries.
onSearchStateChange: A function to listen to changes in the Search State.

Server-Side Rendering of Algolia results

The AlgoliaSearch wrapper allows injecting the results of a server-side search, in order to set the initial context for server-side rendering. To do this, you need to execute a search on the server and set the initialState and initialResults fields.

Here's how to do the query in Ruby:

query = 'work'
facetFilters = ["tags:Young Adults", "ministry:The Porch"]
limit = 5

state = {
  query: query,
  facetFilters: facetFilters,
  hitsPerPage: limit
}

results = Algolia::Index.new(index).search(query, {
  facetFilters: facetFilters,
  hitsPerPage: limit
})

Then prerender your react component:

<%= react_component('MyWrapperComponent',
      {
        # ... other props,
        initialState: state,
        initialResults: results
      },
      prerender: true) %>

SearchBox

import {SearchBox} from '@watermarkchurch/react-instantsearch-components'

<SearchBox
  className="[string]"
  autoFocus={true}
  focusShortcuts={['s', '/']}
  searchAsYouType={true}
  showLoadingIndicator={false}
  loadingIndicator={<svg>...</svg>}
  reset={<i className="material-icons">...</i>}
  submit={<i className="material-icons">...</i>}

  autosuggestIndex={'[string]'}
  >

Renders a search box with Autocomplete

autosuggestIndex: set this to use a different index for Autocomplete results instead of the current search index
autoFocus: set to true to grab focus as soon as the component renders
searchAsyouType: set to false to wait until the user hits enter before executing a search (does not affect autosuggest)
showLoadingIndicator: set to false to disable the loading spinner SVG

MediaGallery

import {MediaGallery} from '@watermarkchurch/react-instantsearch-components'

<MediaGallery
  mediaSourceDefaults={{}}
  mediaSource={{}}
  excludeIDs={'[string]'}
  header={<>...</>}
  viewAllLink={'[url]'}
  apiKey={'[algolia api key]'}
  appId={'[algolia app id]'}
  columns={3}

  HitComponent={MyHitComponent}
  LoadingComponent={MyLoadingComponent}
>

Renders a Gallery widget that sources data from the Media system or Algolia.

See JSDoc annotations on IMediaGalleryProps for details.