Skip to content

Commit 467ea6f

Browse files
dhayabdhayab
authored
docs(examples): add example for react instantsearch hooks (#905)
1 parent fb9583e commit 467ea6f

26 files changed

+1226
-4
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ dist
66
node_modules
77
examples/twitter-compose-with-typeahead
88
examples/slack-with-emojis-and-commands
9+
examples/react-instantsearch-hooks
910
examples/vue-instantsearch

‎examples/react-instantsearch-hooks/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/react-instantsearch-hooks/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Autocomplete with React InstantSearch Hooks example
2+
3+
This example shows how to integrate Autocomplete with [React InstantSearch Hooks](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react-hooks/).
4+
5+
<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete with React InstantSearch Hooks demo" /></p>
6+
7+
## Demo
8+
9+
[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-instantsearch-hooks)
10+
11+
## How to run this example locally
12+
13+
### 1. Clone this repository
14+
15+
```sh
16+
git clone [email protected]:algolia/autocomplete.git
17+
```
18+
19+
### 2. Install the dependencies and run the server
20+
21+
```sh
22+
yarn
23+
yarn workspace @algolia/autocomplete-example-react-instantsearch-hooks dev
24+
```
25+
26+
Alternatively, you may use npm:
27+
28+
```sh
29+
cd examples/react-instantsearch-hooks
30+
npm install
31+
npm run dev
32+
```
33+
34+
Open <http://localhost:3000> to see your app.

‎examples/react-instantsearch-hooks/capture.png

686 KB
Loading

‎examples/react-instantsearch-hooks/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="shortcut icon" type="image/x-icon" href="/src/favicon.png" />
8+
<title>React InstantSearch Hooks | Autocomplete</title>
9+
<!--
10+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
11+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
12+
-->
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
16+
/>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<script type="module" src="/src/main.tsx"></script>
21+
</body>
22+
</html>

‎examples/react-instantsearch-hooks/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@algolia/autocomplete-example-react-instantsearch-hooks",
3+
"description": "Autocomplete with React InstantSearch Hooks",
4+
"version": "1.5.3",
5+
"private": true,
6+
"license": "MIT",
7+
"scripts": {
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@algolia/autocomplete-js": "1.5.3",
14+
"@algolia/autocomplete-plugin-query-suggestions": "1.5.3",
15+
"@algolia/autocomplete-plugin-recent-searches": "1.5.3",
16+
"@algolia/autocomplete-theme-classic": "1.5.3",
17+
"algoliasearch": "4.12.1",
18+
"react": "17.0.2",
19+
"react-dom": "17.0.2",
20+
"react-instantsearch-hooks": "6.22.0"
21+
},
22+
"devDependencies": {
23+
"@types/react": "17.0.33",
24+
"@types/react-dom": "17.0.10",
25+
"@vitejs/plugin-react": "1.0.7",
26+
"typescript": "4.5.4",
27+
"vite": "2.8.0"
28+
},
29+
"keywords": [
30+
"algolia",
31+
"autocomplete",
32+
"react"
33+
]
34+
}

‎examples/react-instantsearch-hooks/src/App.css

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
margin: 0;
7+
padding: 0;
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
9+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
10+
background-color: rgb(244, 244, 249);
11+
color: rgb(65, 65, 65);
12+
}
13+
14+
a {
15+
color: var(--aa-primary-color);
16+
text-decoration: none;
17+
}
18+
19+
.header {
20+
background: rgb(252 252 255 / 92%);
21+
box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
22+
0 1px 3px 0 rgba(35, 38, 59, 0.15);
23+
padding: 0.5rem 0;
24+
position: fixed;
25+
top: 0;
26+
width: 100%;
27+
}
28+
29+
.header-wrapper {
30+
align-items: center;
31+
display: grid;
32+
grid-template-columns: 100px 1fr;
33+
}
34+
35+
.header-nav {
36+
font-weight: 500;
37+
}
38+
39+
.wrapper {
40+
margin: 0 auto;
41+
max-width: 1200px;
42+
padding: 0 1.5rem;
43+
width: 100%;
44+
}
45+
46+
.container {
47+
margin-top: 3.5rem;
48+
padding: 1.5rem;
49+
display: grid;
50+
gap: 1rem;
51+
grid-template-columns: 1fr 3fr;
52+
}
53+
54+
/* Autocomplete */
55+
56+
.aa-Panel {
57+
position: fixed;
58+
}
59+
60+
/* InstantSearch */
61+
62+
.ais-Hits-list {
63+
display: grid;
64+
gap: 1rem;
65+
grid-template-columns: 1fr 1fr 1fr;
66+
}
67+
68+
.ais-Hits-item {
69+
padding: 1rem !important;
70+
}
71+
72+
.hit {
73+
align-items: center;
74+
display: grid;
75+
gap: 1rem;
76+
}
77+
78+
.hit h1 {
79+
font-size: 1rem;
80+
}
81+
82+
.hit p {
83+
font-size: 0.8rem;
84+
opacity: 0.8;
85+
}
86+
87+
.hit-image {
88+
align-items: center;
89+
display: flex;
90+
height: 100px;
91+
justify-content: center;
92+
}
93+
94+
.hit-image img {
95+
max-height: 100%;
96+
}
97+
98+
.ais-HierarchicalMenu-item--selected.ais-HierarchicalMenu-item--parent
99+
> div:first-of-type
100+
.ais-HierarchicalMenu-label {
101+
font-weight: bold;
102+
}
103+
104+
.ais-HierarchicalMenu-item--selected:not(.ais-HierarchicalMenu-item--parent)
105+
.ais-HierarchicalMenu-label {
106+
font-weight: bold;
107+
}
108+
109+
.ais-Pagination {
110+
display: flex;
111+
justify-content: center;
112+
margin: 2rem 0;
113+
}

‎examples/react-instantsearch-hooks/src/App.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import algoliasearch from 'algoliasearch/lite';
2+
import { Configure, InstantSearch } from 'react-instantsearch-hooks';
3+
4+
import { Autocomplete, Hit } from './components';
5+
import {
6+
INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTES,
7+
INSTANT_SEARCH_INDEX_NAME,
8+
} from './constants';
9+
import { HierarchicalMenu, Hits, Pagination, Panel } from './widgets';
10+
11+
import './App.css';
12+
13+
function App() {
14+
const searchClient = algoliasearch(
15+
'latency',
16+
'6be0576ff61c053d5f9a3225e2a90f76'
17+
);
18+
19+
return (
20+
<div>
21+
<InstantSearch
22+
searchClient={searchClient}
23+
indexName={INSTANT_SEARCH_INDEX_NAME}
24+
routing
25+
>
26+
<header className="header">
27+
<div className="header-wrapper wrapper">
28+
<nav className="header-nav">
29+
<a href="/">Home</a>
30+
</nav>
31+
<Autocomplete
32+
searchClient={searchClient}
33+
placeholder="Search products"
34+
detachedMediaQuery="none"
35+
openOnFocus
36+
/>
37+
</div>
38+
</header>
39+
40+
<Configure
41+
attributesToSnippet={['name:7', 'description:15']}
42+
snippetEllipsisText="…"
43+
/>
44+
<div className="container wrapper">
45+
<div>
46+
<Panel header="Categories">
47+
<HierarchicalMenu
48+
attributes={INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTES}
49+
/>
50+
</Panel>
51+
</div>
52+
<div>
53+
<Hits hitComponent={Hit} />
54+
<Pagination />
55+
</div>
56+
</div>
57+
</InstantSearch>
58+
</div>
59+
);
60+
}
61+
62+
export default App;

0 commit comments

Comments
 (0)