Nicer Perusal Method

    @algolia/instantsearch-pattern-router

    1.1.0 • Public • Published

    @algolia/instantsearch-pattern-router

    A router for instantsearch which allows simple URLs to be written in the path! Compatible with:

    • InstantSearch.js v3+
    • Vue InstantSearch v2+
    • Angular InstantSearch v2+
    • React InstantSearch Hooks v6+
    // either via import:
    import { patternRouter, getWindowEnvironment } from '@algolia/instantsearch-pattern-router';
    // or via umd:
    const { patternRouter, getWindowEnvironment } = window.instantsearchPatternRouter;
    
    instantsearch({
      routing: {
        router: patternRouter({
          pattern: '/search/:hierarchy*/c/category?',
          environment: getWindowEnvironment(),
          // optional
          windowTitle: ({ category }) => `My Site Search — ${category}`,
          writeDelay: 400,
        }),
        // required to flatten to one level
        stateMapping: myFlattenMapping,
      },
    });

    options

    Pattern string

    A pattern is a string of segments, more detailed examples can be found on the path-to-regexp documentation.

    queryString object

    If you want to further customize how the query string is parsed and written, you can pass a custom object with read and write keys, defaulting to:

    const defaultQueryString: QueryStringParameter = {
      read({ qsModule, search }) {
        return qsModule.parse(search, {
          arrayLimit: 99,
          ignoreQueryPrefix: true,
        }) as TRouteState;
      },
      write({ qsModule, state }) {
        return qsModule.stringify(state, { addQueryPrefix: true });
      },
    }

    Environment object

    Environment is an option to make this package usable in the browser, but also in other environments, like server-side rendering. The keys that are expected are:

    type Environment = {
      read: () => URL;
      pushState: History['pushState'];
      events?: {
        addEventListener(
          type: 'popstate',
          listener: (this: Window, ev: PopStateEvent) => any
        ): void;
        removeEventListener(
          type: 'popstate',
          listener: (this: Window, ev: PopStateEvent) => any
        ): void;
      };
      setTitle?: (title?: string) => void;
    };

    title function (optional)

    A function that retrieves the current RouteState object

    writeDelay number (optional)

    The number of ms to debounce writing to the URL to maintain performance (writing on every keystroke slows down a site considerably). Default is 500ms.

    Install

    npm i @algolia/instantsearch-pattern-router

    DownloadsWeekly Downloads

    20

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    52.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • fabienmotte
    • sarahdayan
    • dhaya.b
    • haroenv
    • francoischalifour
    • tkrugg