docs(examples): add example for react instantsearch hooks (#905)

algolia · Feb 25, 2022 · 467ea6f · 467ea6f
1 parent fb9583e
commit 467ea6f
Show file tree

Hide file tree

Showing 26 changed files with 1,226 additions and 4 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,4 +6,5 @@ dist
 node_modules
 examples/twitter-compose-with-typeahead
 examples/slack-with-emojis-and-commands
+examples/react-instantsearch-hooks
 examples/vue-instantsearch
diff --git a/examples/react-instantsearch-hooks/.gitignore b/examples/react-instantsearch-hooks/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react-instantsearch-hooks/README.md b/examples/react-instantsearch-hooks/README.md
@@ -0,0 +1,34 @@
+# Autocomplete with React InstantSearch Hooks example
+
+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/).
+
+<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete with React InstantSearch Hooks demo" /></p>
+
+## Demo
+
+[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-instantsearch-hooks)
+
+## How to run this example locally
+
+### 1. Clone this repository
+
+```sh
+git clone git@github.com:algolia/autocomplete.git
+```
+
+### 2. Install the dependencies and run the server
+
+```sh
+yarn
+yarn workspace @algolia/autocomplete-example-react-instantsearch-hooks dev
+```
+
+Alternatively, you may use npm:
+
+```sh
+cd examples/react-instantsearch-hooks
+npm install
+npm run dev
+```
+
+Open <http://localhost:3000> to see your app.
diff --git a/examples/react-instantsearch-hooks/capture.png b/examples/react-instantsearch-hooks/capture.png
diff --git a/examples/react-instantsearch-hooks/index.html b/examples/react-instantsearch-hooks/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/x-icon" href="/src/favicon.png" />
+    <title>React InstantSearch Hooks | Autocomplete</title>
+    <!--
+    Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+    https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+    -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-instantsearch-hooks/package.json b/examples/react-instantsearch-hooks/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@algolia/autocomplete-example-react-instantsearch-hooks",
+  "description": "Autocomplete with React InstantSearch Hooks",
+  "version": "1.5.3",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.5.3",
+    "@algolia/autocomplete-plugin-query-suggestions": "1.5.3",
+    "@algolia/autocomplete-plugin-recent-searches": "1.5.3",
+    "@algolia/autocomplete-theme-classic": "1.5.3",
+    "algoliasearch": "4.12.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-instantsearch-hooks": "6.22.0"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.33",
+    "@types/react-dom": "17.0.10",
+    "@vitejs/plugin-react": "1.0.7",
+    "typescript": "4.5.4",
+    "vite": "2.8.0"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "react"
+  ]
+}
diff --git a/examples/react-instantsearch-hooks/src/App.css b/examples/react-instantsearch-hooks/src/App.css
@@ -0,0 +1,113 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+}
+
+a {
+  color: var(--aa-primary-color);
+  text-decoration: none;
+}
+
+.header {
+  background: rgb(252 252 255 / 92%);
+  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
+    0 1px 3px 0 rgba(35, 38, 59, 0.15);
+  padding: 0.5rem 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.header-wrapper {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 100px 1fr;
+}
+
+.header-nav {
+  font-weight: 500;
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 1.5rem;
+  width: 100%;
+}
+
+.container {
+  margin-top: 3.5rem;
+  padding: 1.5rem;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 3fr;
+}
+
+/* Autocomplete */
+
+.aa-Panel {
+  position: fixed;
+}
+
+/* InstantSearch */
+
+.ais-Hits-list {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.ais-Hits-item {
+  padding: 1rem !important;
+}
+
+.hit {
+  align-items: center;
+  display: grid;
+  gap: 1rem;
+}
+
+.hit h1 {
+  font-size: 1rem;
+}
+
+.hit p {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.hit-image {
+  align-items: center;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+}
+
+.hit-image img {
+  max-height: 100%;
+}
+
+.ais-HierarchicalMenu-item--selected.ais-HierarchicalMenu-item--parent
+  > div:first-of-type
+  .ais-HierarchicalMenu-label {
+  font-weight: bold;
+}
+
+.ais-HierarchicalMenu-item--selected:not(.ais-HierarchicalMenu-item--parent)
+  .ais-HierarchicalMenu-label {
+  font-weight: bold;
+}
+
+.ais-Pagination {
+  display: flex;
+  justify-content: center;
+  margin: 2rem 0;
+}
diff --git a/examples/react-instantsearch-hooks/src/App.tsx b/examples/react-instantsearch-hooks/src/App.tsx
@@ -0,0 +1,62 @@
+import algoliasearch from 'algoliasearch/lite';
+import { Configure, InstantSearch } from 'react-instantsearch-hooks';
+
+import { Autocomplete, Hit } from './components';
+import {
+  INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTES,
+  INSTANT_SEARCH_INDEX_NAME,
+} from './constants';
+import { HierarchicalMenu, Hits, Pagination, Panel } from './widgets';
+
+import './App.css';
+
+function App() {
+  const searchClient = algoliasearch(
+    'latency',
+    '6be0576ff61c053d5f9a3225e2a90f76'
+  );
+
+  return (
+    <div>
+      <InstantSearch
+        searchClient={searchClient}
+        indexName={INSTANT_SEARCH_INDEX_NAME}
+        routing
+      >
+        <header className="header">
+          <div className="header-wrapper wrapper">
+            <nav className="header-nav">
+              <a href="/">Home</a>
+            </nav>
+            <Autocomplete
+              searchClient={searchClient}
+              placeholder="Search products"
+              detachedMediaQuery="none"
+              openOnFocus
+            />
+          </div>
+        </header>
+
+        <Configure
+          attributesToSnippet={['name:7', 'description:15']}
+          snippetEllipsisText="…"
+        />
+        <div className="container wrapper">
+          <div>
+            <Panel header="Categories">
+              <HierarchicalMenu
+                attributes={INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTES}
+              />
+            </Panel>
+          </div>
+          <div>
+            <Hits hitComponent={Hit} />
+            <Pagination />
+          </div>
+        </div>
+      </InstantSearch>
+    </div>
+  );
+}
+
+export default App;