1. Search hooks for React and Next.js

useInfiniteSearch

Version:

The useInfiniteSearch hook enables searching with infinite scrolling. It’s ideal for loading results progressively as the user scrolls or clicks a Load More button that can be handled via the loadMore function.

Configuration

To use the hook, you can provide the searchIndexId and the search query.

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const { results } = useInfiniteSearch({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product'
});

Supported parameters

The hook expects the ID of the search index and also supports several other parameters used to sort, paginate, perform a manual search etc.

Parameter

Type

Description

searchIndexID

string

The ID of the SitecoreAI search index to retrieve results from.

Required

query

string

Specify a query to search the index for specific content.

pageSize

number

Specify the number of results per page.

sort

 
{
name: string;
order: "asc" | "desc"
}
OR
Array<{
name: string;
order: "asc" | "desc"
}>;

Specify an object or array of objects containing the name and order to sort results by.

enabled

boolean

Specify whether to run a manual search.

Examples

The hook contains all traditional searching capabilities like sorting (single, multi-field, and nested fields), setting a custom page size, and manual search execution. The hook also supports TypeScript generics that lets you define the shape of your search results for type safety.

Simple search with keyphrase

A basic search requires only the searchIndexId. You can specify additional parameters as needed.

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

function InfiniteSearchComponent() {
  const { results } = useInfiniteSearch({
    searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
    query: 'article',
    pageSize: 20,
  });

  return (
    <div>
      <p>Found {results.length} results</p>
      <ul>
        {results.map((result) => {
          return <li key={result.id}>{result.title}</li>;
        })}
      </ul>
    </div>
  );
}

Search with a generic type

The useInfiniteSearch hook supports TypeScript generics, allowing you to define the shape of your search document for type safety and better IDE support.

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

type Article = {
  id: string;
  title: string;
};

function InfiniteSearchComponent() {
  const { results, isLoading, loadMore, hasNextPage, isLoadingMore } = useInfiniteSearch<Article>({
    searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
    query: 'article',
    pageSize: 20,
  });

  if (isLoading) return <div>Loading initial results...</div>;

  return (
    <div>
      <p>Found {results.length} results</p>
      <ul>
        {results.map((result) => {
          return <li key={result.id}>{result.title}</li>;
        })}
      </ul>

      {isLoadingMore && (
        <div style={{ textAlign: 'center', padding: '1rem' }}>
          Loading more results...
        </div>
      )}

      {hasNextPage && (
        <button onClick={loadMore} disabled={isLoadingMore}>
          {isLoadingMore ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
}

Search with basic sorting

The hook supports sorting results using a single sort object specifying the name and order. The following example sorts the search results by the price in the ascending order (lowest first).

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

function SortedInfiniteSearch() {
  const { results, loadMore, hasNextPage, isLoadingMore } = useInfiniteSearch<Event>({
    searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
    query: 'conference',
    pageSize: 20,
    sort: {
      name: 'price',
      order: 'asc',
    },
  });
  ... rest of the code ...
}

Search with multi-field sorting

You can also specify multiple fields to sort. Instead of a single object, you should specify this as an array of objects. The following example sorts the search results by category in the ascending order, followed by price in ascending order.

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const { results, loadMore, hasNextPage } = useInfiniteSearch<Product>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product',
  pageSize: 30,
  sort: [
    {
      name: 'category',
      order: 'asc',
    },
    {
      name: 'price',
      order: 'asc',
    },
  ],
});

Search with nested field sorting

Using dot notation (.), you can sort nested properties.

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

type Event = {
  id: string;
  name: string;
  date: string;
  organizer: {
    name: string;
    company: string;
  };
  attendees: number;
};

const { results, loadMore, hasNextPage } = useInfiniteSearch<Event>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'conference',
  pageSize: 20,
  sort: {
    name: 'organizer.name', // Sort by nested property using dot notation
    order: 'asc',
  },
});

You can perform a manual search by setting the enabled parameter to true. This is useful when you want the user to type in a query and click a button to perform the search.

import { useState } from 'react';
import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const [enabled, setEnabled] = useState(false);
const { results, isLoading, loadMore, hasNextPage } = useInfiniteSearch<Product>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product',
  pageSize: 30,
  enabled,
});
... rest of the code ...

Search with custom page size

You can customize the number of results loaded per page using the pageSize option:

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const { results, loadMore, hasNextPage } = useInfiniteSearch<Product>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product',
  pageSize: 30,
});
... rest of the code ...
If you have suggestions for improving this article, let us know!