React + Autocomplete

Get started

Creating the component (get a free account here)

1import { autocomplete } from '@algolia/autocomplete-js';
2import React, { createElement, Fragment, useEffect, useRef } from 'react';
3import { render } from 'react-dom';
4
5export 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

1import React, { createElement } from 'react';
2import { getAlgoliaResults } from '@algolia/autocomplete-js';
3import algoliasearch from 'algoliasearch';
4import { Autocomplete } from './components/Autocomplete';
5import { ProductItem } from './components/ProductItem';
6
7const appId = 'latency';
8const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
9const searchClient = algoliasearch(appId, apiKey);
10
11function 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
43export default App;

Using the component

1import React, { createElement } from 'react';
2
3export 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}