algolia_instantsearch_react_searchbox_hits_highlight.ts

1import React from 'react';
2import algoliasearch from 'algoliasearch/lite';
3import {
4  InstantSearch,
5  SearchBox,
6  Hits,
7  Highlight,
8  Configure,
9} from 'react-instantsearch';
10
11// Replace with your own Application ID and Search-Only API Key
12const searchClient = algoliasearch(
13  'latency',
14  '6be0576ff61c053d5f9a3225e2a90f76'
15);
16
17interface HitProps {
18  hit: {
19    name: string;
20    description: string;
21    [key: string]: any;
22  };
23}
24
25function Hit({ hit }: HitProps) {
26  return (
27    <article>
28      <h1>
29        <Highlight attribute="name" hit={hit} />
30      </h1>
31      <p>
32        <Highlight attribute="description" hit={hit} />
33      </p>
34    </article>
35  );
36}
37
38const App: React.FC = () => {
39  return (
40    <InstantSearch
41      searchClient={searchClient}
42      indexName="instant_search"
43      insights
44    >
45      <Configure hitsPerPage={8} />
46      <div className="search-container">
47        <SearchBox />
48        <Hits hitComponent={Hit} />
49      </div>
50    </InstantSearch>
51  );
52};
53
54export default App;