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
  • Installation
  • Getting started
  • API reference
  • Documentation
  • Contributing
  • License

react-instantsearch-core

React InstantSearch Core is an open-source UI library for React that lets you quickly build a search interface in your front-end application.

InstantSearch’s goal is to help you implement awesome search experiences as smoothly as possible by providing a complete search ecosystem. InstantSearch tackles an important part of this vast goal by providing front-end primitives that you can assemble into unique search interfaces.

Note: react-instantsearch-core exports renderless components and hooks which can be used for both web and React Native. If you are using React in a web project, we recommend using the package react-instantsearch instead, as it includes complete components that render to the DOM.

Installation

React InstantSearch Core is available on the npm registry. It relies on algoliasearch to communicate with Algolia APIs.

yarn add algoliasearch react-instantsearch-core
# or
npm install algoliasearch react-instantsearch-core

Getting started

React InstantSearch Core is a headless React library that lets you create an instant search results experience using Algolia’s search API.

Check out our Getting Started guide to start implementing a full-featured search experience with React InstantSearch Core.

API reference

Check out the API reference.

Documentation

The documentation is available on algolia.com/doc.

Contributing

We welcome all contributors, from casual to regular 💙

• Bug report. Is something not working as expected? Send a bug report.
• Feature request. Would you like to add something to the library? Send a feature request.
• Documentation. Did you find a typo in the doc? Open an issue and we'll take care of it.
• Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

To start contributing to code, you need to:

1. Fork the project
2. Clone the repository
3. Install the dependencies: yarn

Please read our contribution process to learn more.

License

React InstantSearch is MIT licensed.