react-instantsearch-core

What is react-instantsearch-core?

react-instantsearch-core is a library that provides a set of React components and connectors to build search interfaces using Algolia's search engine. It allows developers to create highly customizable and performant search experiences in their React applications.

What are react-instantsearch-core's main functionalities?

SearchBox

The SearchBox component provides a search input field that users can type into to perform searches. It is a core component for capturing user queries.

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-core';

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

Hits

The Hits component is used to display the search results. You can customize how each hit (search result) is rendered by providing a custom hitComponent.

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-core';

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

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

RefinementList

The RefinementList component allows users to filter search results based on specific attributes, such as categories. It provides a list of checkboxes for users to refine their search.

import { InstantSearch, SearchBox, Hits, RefinementList } from 'react-instantsearch-core';

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

Pagination

The Pagination component provides pagination controls to navigate through search results. It is useful for handling large sets of search results by breaking them into pages.

import { InstantSearch, SearchBox, Hits, Pagination } from 'react-instantsearch-core';

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

Other packages similar to react-instantsearch-core

react-searchkit

react-searchkit is a library for building search interfaces with React. It is designed to work with Invenio, a framework for large-scale digital repositories. Compared to react-instantsearch-core, react-searchkit is more tailored towards specific use cases involving digital repositories and may not offer the same level of flexibility for general search applications.

react-instantsearch-dom

react-instantsearch-dom is another library from Algolia that provides a set of React components for building search interfaces. It is similar to react-instantsearch-core but is more focused on DOM-specific components, making it easier to use for web applications. It offers a higher-level API compared to react-instantsearch-core.

README

react-instantsearch-core

This is the React version of Algolia's instantsearch library.

Go to the React InstantSearch website or the React InstantSearch GitHub repository for more information.