Reactive SearchSpring

Overview

SearchSpring is a service which provides a straight-forward Search API to filter large amounts of data (similar to Elasticsearch), responses from the Search API include matching items, metadata about the current query, which filters are applied, which filters can be applied and more.

The Reactive SearchSpring library provides a collection of utility components which can be used to mutate a Search Request. The utility components are entirely generic and expect styling and positioning to be implemented by the caller, the props which are passed to the components include methods for mutating the Search Request and metadata from SearchSpring.

Examples

• https://reactive-searchspring.netlify.app/instant-search
• https://reactive-searchspring.netlify.app/search
• https://reactive-searchspring.netlify.app/collection
• https://reactive-searchspring.netlify.app/prev-next
• https://reactive-searchspring.netlify.app/infinite
• https://reactive-searchspring.netlify.app/load-more

Install

This package is private and requires access to the @dotdev organization to install.

yarn add @dotdev/reactive-searchspring

Usage

At the heart of @dotdev/reactive-searchspring is the [[SearchSpring]] class, each instance contains a scoped set of filters and results and is implemented with the React Context API.

You can create an instance with the SearchSpring.Provider component and nested within that you can build an interface for mutating and displaying the Search Request with the other utility components such as adding a search input filter with the SearchSpring.Search component and a list of results with the SearchSpring.Results component.

import { render } from "react-dom";
import { SearchSpring } from "@dotdev/searchspring";

const Example = () => (
  <SearchSpring.Provider
    searchspringOptions={...}
  >
    <SearchSpring.Search
      render={({ setSearch }) => (
        <input type="search" onChange={(event) => setSearch(event.target.value)} />
      )}
    />
    <SearchSpring.Results
      pagination={{
        page: 1,
        limit: 32,
      }}
      render={{
        result: ({ result }) => <div><span>{result.title}</span> - <strong>{result.price}</strong></div>,
        loading: () => <div><span>Loading...</span></div>,
        empty: () => <div><span>No Results.</span></div>,
      }}
    />
  </SearchSpring.Provider>
);

render(
  <Example />,
  document.getElementById("root"),
);

See the /examples folder for complete example implementations.

Development

Transpile

The @dotdev/reactive-searchspring package is transpiled with the Typescript Compiler and not minified or optimized beyond that, no additional tooling is required to transpile.

Scripts

Scripts are intended to be executed with yarn.

yarn run <script>

package

Transpile source into Javascript, optional --watch flag to re-transpile on source file change.

lint

Lint the source with tslint.

docs

Generate docs with typedoc.