Skip to content

Commit d0353fc

Browse files
sarahdayansarahdayan
authored
feat(React InstantSearch Hooks): introduce multi-index hits sample (#388)
1 parent 924553b commit d0353fc

10 files changed

Lines changed: 9094 additions & 0 deletions

File tree

‎React InstantSearch Hooks/multi-index-hits/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎React InstantSearch Hooks/multi-index-hits/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# multi-index-hits
2+
3+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
4+
5+
## Get started
6+
7+
To run this project locally, install the dependencies and run the local server:
8+
9+
```sh
10+
npm install
11+
npm start
12+
```
13+
14+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
15+
16+
```sh
17+
yarn
18+
yarn start
19+
```
20+
21+
Open http://localhost:3000 to see your app.

‎React InstantSearch Hooks/multi-index-hits/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "multi-index-hits",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"algoliasearch": "^4.13.1",
7+
"instantsearch.css": "^7.4.5",
8+
"react": "^18.1.0",
9+
"react-dom": "^18.1.0",
10+
"react-instantsearch-hooks-web": "^6.27.0",
11+
"react-scripts": "^5.0.1"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build"
16+
},
17+
"eslintConfig": {
18+
"extends": [
19+
"react-app",
20+
"react-app/jest"
21+
]
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

‎React InstantSearch Hooks/multi-index-hits/public/favicon.png‎

1.88 KB
Loading

‎React InstantSearch Hooks/multi-index-hits/public/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
9+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
10+
11+
<title>multi-index-hits</title>
12+
</head>
13+
14+
<body>
15+
<noscript>
16+
You need to enable JavaScript to run this app.
17+
</noscript>
18+
19+
<div id="root"></div>
20+
</body>
21+
22+
</html>

‎React InstantSearch Hooks/multi-index-hits/src/App.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.container {
2+
max-width: 1200px;
3+
margin: 0 auto;
4+
padding: 1rem;
5+
}
6+
7+
@media screen and (max-width: 768px) {
8+
.ais-Hits-item {
9+
width: calc(50% - 1rem);
10+
}
11+
}
12+
13+
@media screen and (max-width: 480px) {
14+
.ais-Hits-item {
15+
width: 100%;
16+
}
17+
}

‎React InstantSearch Hooks/multi-index-hits/src/App.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import algoliasearch from 'algoliasearch/lite';
2+
import {
3+
Configure,
4+
Highlight,
5+
Hits,
6+
Index,
7+
InstantSearch,
8+
SearchBox,
9+
} from 'react-instantsearch-hooks-web';
10+
11+
import 'instantsearch.css/themes/algolia.css';
12+
import './App.css';
13+
14+
const searchClient = algoliasearch(
15+
'latency',
16+
'6be0576ff61c053d5f9a3225e2a90f76'
17+
);
18+
19+
function App() {
20+
return (
21+
<div className="container">
22+
<InstantSearch indexName="instant_search" searchClient={searchClient}>
23+
<SearchBox />
24+
25+
<Index indexName="instant_search">
26+
<h2>
27+
index: <code>instant_search</code>
28+
</h2>
29+
<Configure hitsPerPage={16} />
30+
<Hits hitComponent={ProductHit} />
31+
</Index>
32+
33+
<Index indexName="instant_search_demo_query_suggestions">
34+
<h2>
35+
index: <code>instant_search_demo_query_suggestions</code>
36+
</h2>
37+
<Configure hitsPerPage={8} />
38+
<Hits hitComponent={QuerySuggestionHit} />
39+
</Index>
40+
</InstantSearch>
41+
</div>
42+
);
43+
}
44+
45+
function ProductHit({ hit }) {
46+
return (
47+
<div>
48+
<Highlight attribute="name" hit={hit} />
49+
</div>
50+
);
51+
}
52+
53+
function QuerySuggestionHit({ hit }) {
54+
return (
55+
<div>
56+
<Highlight attribute="query" hit={hit} />
57+
</div>
58+
);
59+
}
60+
61+
export default App;

‎React InstantSearch Hooks/multi-index-hits/src/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
body,
2+
h1 {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
9+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
10+
}

‎React InstantSearch Hooks/multi-index-hits/src/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import App from './App';
5+
6+
import './index.css';
7+
8+
const container = document.getElementById('root');
9+
const root = createRoot(container);
10+
11+
root.render(<App />);

0 commit comments

Comments
 (0)