React

React + Autocomplete

Build search experiences with UI components and libraries.

Sign up
What is Algolia

What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps.
Libraries with every major language and framework make it easy to enrich your users' experiences. 

React Autocomplete

Add autocomplete to your react applications

Autocomplete React library is an open source, production-ready library to build interactive, fully customizable autocomplete experiences - explore the showcase.

The library creates an input and provides the interactivity and accessibility attributes, but you’re in full control of the DOM elements to output. Integrates with Instantsearch.js 

Features

  • Open source, production-ready JavaScript library

  • Works with multiple sources of data

  • Datasources can be static or dynamic

  • Supports promises so that you can fetch sources from any asynchronous API

  • Provides a Templates API to customize the rendering

  • Manages state allowing you to control UI behavior 

  • Includes plugins for query suggestions, related searches, and sending Analytics events

Version

  • React (v16.8+) application

  • Works in node and all browsers (including IE11+)

Related Integrations

InstantSearch for ReactVueAngularVanilla, SearchInsights, and Recommend APIs

Get started

  • Creating the component (get a free account here)
    1
    import { autocomplete } from '@algolia/autocomplete-js';
    2
    import React, { createElement, Fragment, useEffect, useRef } from 'react';
    3
    import { render } from 'react-dom';
    4
    5
    export function Autocomplete(props) {
    6
      const containerRef = useRef(null);
    7
    8
      useEffect(() => {
    9
        if (!containerRef.current) {
    10
          return undefined;
    11
        }
    12
    13
        const search = autocomplete({
    14
          container: containerRef.current,
    15
          renderer: { createElement, Fragment },
    16
          render({ children }, root) {
    17
            render(children, root);
    18
          },
    19
          ...props,
    20
        });
    21
    22
        return () => {
    23
          search.destroy();
    24
        };
    25
      }, [props]);
    26
    27
      return <div ref={containerRef} />;
    28
    }
  • Mounting the autocomplete
    1
    import React, { createElement } from 'react';
    2
    import { getAlgoliaResults } from '@algolia/autocomplete-js';
    3
    import algoliasearch from 'algoliasearch';
    4
    import { Autocomplete } from './components/Autocomplete';
    5
    import { ProductItem } from './components/ProductItem';
    6
    7
    const appId = 'latency';
    8
    const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
    9
    const searchClient = algoliasearch(appId, apiKey);
    10
    11
    function App() {
    12
      return (
    13
        <div className="app-container">
    14
          <h1>React Application</h1>
    15
          <Autocomplete
    16
            openOnFocus={true}
    17
            getSources={({ query }) => [
    18
              {
    19
                sourceId: 'products',
    20
                getItems() {
    21
                  return getAlgoliaResults({
    22
                    searchClient,
    23
                    queries: [
    24
                      {
    25
                        indexName: 'instant_search',
    26
                        query,
    27
                      },
    28
                    ],
    29
                  });
    30
                },
    31
                templates: {
    32
                  item({ item, components }) {
    33
                    return <ProductItem hit={item} components={components} />;
    34
                  },
    35
                },
    36
              },
    37
            ]}
    38
          />
    39
        </div>
    40
      );
    41
    }
    42
    43
    export default App;
  • Using the component
    1
    import React, { createElement } from 'react';
    2
    3
    export function ProductItem({ hit, components }) {
    4
      return (
    5
        <a href={hit.url} className="aa-ItemLink">
    6
          <div className="aa-ItemContent">
    7
            <div className="aa-ItemTitle">
    8
              <components.Highlight hit={hit} attribute="name" />
    9
            </div>
    10
          </div>
    11
        </a>
    12
      );
    13
    }
Get started for free
Explore developer docs