Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
react-instantsearch
Advanced tools
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.
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;
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 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.
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 | Vue InstantSearch | InstantSearch Android | InstantSearch iOS
You should be using React InstantSearch if you want to:
Note: If you are working with React Native, or otherwise do not use the DOM, check out react-instantsearch-core
instead.
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
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.
The documentation is available on algolia.com/doc.
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.
We welcome all contributors, from casual to regular 💙
To start contributing to code, you need to:
yarn
Please read our contribution process to learn more.
React InstantSearch is MIT licensed.
FAQs
⚡ Lightning-fast search for React, by Algolia
The npm package react-instantsearch receives a total of 209,688 weekly downloads. As such, react-instantsearch popularity was classified as popular.
We found that react-instantsearch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.