react-instantsearch

SearchBox

The SearchBox component provides a search input field that users can type into to perform searches. It is a fundamental part of any search interface.

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="your_index_name">
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
}

export default App;

Hits

The Hits component displays the search results. You can customize how each hit is rendered by providing a custom hitComponent.

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function Hit({ hit }) {
  return (
    <div>
      <h2>{hit.title}</h2>
      <p>{hit.description}</p>
    </div>
  );
}

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="your_index_name">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

export default App;

RefinementList

The RefinementList component allows users to filter search results based on specific attributes, such as categories. This helps in narrowing down the search results.

import { InstantSearch, SearchBox, Hits, RefinementList } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="your_index_name">
      <SearchBox />
      <RefinementList attribute="categories" />
      <Hits />
    </InstantSearch>
  );
}

export default App;

Pagination

The Pagination component provides navigation through pages of search results, making it easier for users to browse through large sets of data.

import { InstantSearch, SearchBox, Hits, Pagination } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="your_index_name">
      <SearchBox />
      <Hits />
      <Pagination />
    </InstantSearch>
  );
}

export default App;