@dotdev/reactive-searchspring
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.1 • Public • Published

    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

    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.

    Keywords

    none

    Install

    npm i @dotdev/reactive-searchspring

    DownloadsWeekly Downloads

    110

    Version

    1.9.1

    License

    SEE LICENCE IN LICENCE.md

    Unpacked Size

    206 kB

    Total Files

    66

    Last publish

    Collaborators

    • samuel-dotdev
    • dotdev-alex
    • adendotdev
    • p_tul
    • laure-dot-dev
    • adamdemirel
    • brendon-dotdev
    • psj
    • 8eecf0d2
    • oscarstranger
    • dotdev-bo
    • dotdev-support
    • dotdev-eric