react-instantsearch

What is react-instantsearch?

react-instantsearch 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 with minimal effort.

What are react-instantsearch's main functionalities?

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;

Other packages similar to react-instantsearch

react-searchkit

react-searchkit is a library for building search interfaces with React. It is highly customizable and supports various backends, including Elasticsearch and Invenio. Compared to react-instantsearch, react-searchkit offers more flexibility in terms of backend integration but may require more configuration.

searchkit

searchkit is a suite of UI components for building search experiences with Elasticsearch. It provides a set of React components that are easy to integrate and customize. Compared to react-instantsearch, searchkit is specifically designed for Elasticsearch and offers a more comprehensive set of features for Elasticsearch-based search interfaces.

README

• react-instantsearch
  • Why
  • Installation
  • Getting started
  • Documentation
  • Playground
  • Contributing
  • License

react-instantsearch

React InstantSearch is an open-source React library that lets you create an instant search result experience using Algolia’s search API. It is part of the InstantSearch family:

React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue InstantSearch | InstantSearch Android | InstantSearch iOS

Why

You should be using React InstantSearch if you want to:

• Design search experiences with best practices
• Customize your components at will
• Follow React principles

Note: If you are working with React Native, or otherwise do not use the DOM, check out react-instantsearch-core instead.

Installation

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

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

Getting started

Using React InstantSearch is as simple as adding these components to your app:

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

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

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

To learn more about the library, follow the getting started guide.

Documentation

The documentation is available on algolia.com/doc.

Playground

You can get to know React InstantSearch on this playground.

Start by adding components and tweaking the display. Once you get more familiar with the library, you can learn more advanced concepts in our guides.

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.