@docsearch/react

What is @docsearch/react?

@docsearch/react is a React component library that provides a search interface for documentation websites. It leverages Algolia's DocSearch to offer a fast and efficient search experience.

What are @docsearch/react's main functionalities?

Basic Search Implementation

This feature allows you to integrate a basic search interface into your React application. You need to provide your Algolia app ID, API key, and index name.

import { DocSearch } from '@docsearch/react';

function App() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      apiKey="YOUR_API_KEY"
      indexName="YOUR_INDEX_NAME"
    />
  );
}

Customizing Search Box

This feature allows you to customize the search box, including placeholder text and button translations, to better fit the design and language of your application.

import { DocSearch } from '@docsearch/react';

function CustomSearch() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      apiKey="YOUR_API_KEY"
      indexName="YOUR_INDEX_NAME"
      placeholder="Search documentation..."
      translations={{
        button: {
          buttonText: 'Search',
          buttonAriaLabel: 'Search'
        }
      }}
    />
  );
}

Handling Search Events

This feature allows you to handle search events, such as input changes, to perform custom actions like logging the search query or triggering other functions.

import { DocSearch } from '@docsearch/react';

function SearchWithEvents() {
  const handleSearchInput = (query) => {
    console.log('Search query:', query);
  };

  return (
    <DocSearch
      appId="YOUR_APP_ID"
      apiKey="YOUR_API_KEY"
      indexName="YOUR_INDEX_NAME"
      onInput={handleSearchInput}
    />
  );
}

Other packages similar to @docsearch/react

react-instantsearch-dom

react-instantsearch-dom is a library by Algolia that provides a set of React components to build search interfaces. It offers more flexibility and customization options compared to @docsearch/react, but requires more setup and configuration.

react-searchbox

react-searchbox is a lightweight search component for React applications. It is simpler and easier to set up than @docsearch/react, but it does not offer the same level of integration with Algolia's search capabilities.

react-autosuggest

react-autosuggest is a React component for building input fields with suggestions. While it is not specifically designed for documentation search, it can be customized to provide similar functionality with more control over the suggestion logic.

README

@docsearch/react

React package for DocSearch, the best search experience for docs.

Installation

yarn add @docsearch/react@3
# or
npm install @docsearch/react@3

If you don’t want to use a package manager, you can use a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@3"></script>

Get started

DocSearch generates a fully accessible search box for you.

import { DocSearch } from '@docsearch/react';

import '@docsearch/css';

function App() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      indexName="YOUR_INDEX_NAME"
      apiKey="YOUR_SEARCH_API_KEY"
    />
  );
}

export default App;

Documentation

Read documentation →

Changelog

3.6.1 (2024-07-16)

Bug Fixes

• updating the templates page (#2273) (4aa0c2c)
• apply form: Update ApplyForm.js (#2270) (069a3de)
• logos: removed logos no longer using algolia (#2261) (8587f58)
• logos: they will not be fixing the search (#2269) (cdfa993)
• logos: update URL and remove logos no longer using DocSearch (#2260) (1081660)

Bug Fixes

• add accessible label to SearchBox input (#2193) (df60b8e)
• docs: sidebar logo size (#2125) (572b117)
• website: update discord link (#2141) (874e16a)

Features

• add additional scss output (#2201) (fe3ac9e)
• add keypress effect to DocSearchButton (#2087) (4c82640)