Search page

Show search results

Use useSearch() hook to show search results, show and apply filters on search.

import {useSearch} from "builderoo";
 
const {loading, results, filters, setQuery, searchAgain, toggleFilter} = useSearch({types: ["product"]})

Learn more about the useSearch() hook.

Show result pagination

Use the usePagination() to implement pagination.

Use currentPage and totalPages properties to show page information. Use gotoPage function to navigate to a specific page. And urlForPage function to get a link to a specific page (this function cannot be used to navigate to pages).

import React from 'react';
import {usePagination} from "builderoo";
 
export default function SearchResults() {
  const {currentPage, gotoPage, totalPages, urlForPage} = usePagination()
  return (
    <section className="px-20 py-10 my-10">
      <div className="mt-20 flex justify-center gap-8">
        <a
          className="cursor-pointer underline text-blue-500"
          href={urlForPage(currentPage - 1)}
          onClick={(e) => gotoPage(currentPage - 1, e)}
        >
          Previous Page
        </a>
        <a
          href={urlForPage(currentPage + 1)}
          className="cursor-pointer underline text-blue-500"
          onClick={(e) => gotoPage(currentPage + 1, e)}
        >
          Next Page
        </a>
      </div>
    </section>
  );
}

Learn more about the usePagination() hook.

Show search filters

The useSearch() hook returns filters, toggleFilter properties that can be used to show and apply one or more filters.

import { useSearch } from "builderoo";
 
// Component
const {filters, toggleFilter} = useSearch()