algolia · shaejaz · Jul 18, 2025 · Jul 18, 2025 · shaejaz · Jul 18, 2025
diff --git a/examples/react/autocomplete-poc/.editorconfig b/examples/react/autocomplete-poc/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/examples/react/autocomplete-poc/.gitignore b/examples/react/autocomplete-poc/.gitignore
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+.parcel-cache
+*.local
+
+# Editor directories and files
+.vscode
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/autocomplete-poc/README.md b/examples/react/autocomplete-poc/README.md
@@ -0,0 +1,23 @@
+# react-instantsearch-app
+
+[![Edit getting-started](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/react/getting-started)
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/instantsearch/tree/master/packages/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```
+
+Open http://localhost:3000 to see your app.
diff --git a/examples/react/autocomplete-poc/favicon.png b/examples/react/autocomplete-poc/favicon.png
diff --git a/examples/react/autocomplete-poc/index.html b/examples/react/autocomplete-poc/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <link rel="shortcut icon" href="favicon.png" />
+
+    <title>React InstantSearch — Getting started</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+
+    <div id="root"></div>
+
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/autocomplete-poc/package.json b/examples/react/autocomplete-poc/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "example-react-autocomplete-poc",
+  "version": "6.97.0",
+  "private": true,
+  "scripts": {
+    "build": "BABEL_ENV=parcel parcel build index.html products.html",
+    "start": "BABEL_ENV=parcel parcel index.html products.html --port 3000"
+  },
+  "dependencies": {
+    "algoliasearch": "5.1.1",
+    "instantsearch.css": "8.5.1",
+    "instantsearch.js": "4.79.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-instantsearch": "7.16.1"
+  },
+  "devDependencies": {
+    "@parcel/core": "2.10.0",
+    "@parcel/packager-raw-url": "2.10.0",
+    "@parcel/transformer-webmanifest": "2.10.0",
+    "@types/react": "19.0.3",
+    "parcel": "2.10.0",
+    "typescript": "5.5.2"
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
+  }
+}
diff --git a/examples/react/autocomplete-poc/products.html b/examples/react/autocomplete-poc/products.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <link rel="shortcut icon" href="favicon.png" />
+
+    <title>React InstantSearch — Getting started</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+
+    <div id="root"></div>
+
+    <script type="module" src="src/products.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/autocomplete-poc/src/App (child components).jsx b/examples/react/autocomplete-poc/src/App (child components).jsx
@@ -0,0 +1,105 @@
+import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import React from 'react';
+import {
+  Configure,
+  Highlight,
+  Hits,
+  Index,
+  InstantSearch,
+  RefinementList,
+  SearchBox,
+  useHits,
+} from 'react-instantsearch';
+
+import { AutoComplete, AutoCompletePanel } from './AutoComplete';
+import { Panel } from './Panel';
+
+import 'instantsearch.css/themes/satellite.css';
+
+import './App.css';
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+
+export function App() {
+  return (
+    <div>
+      <header className="header">
+        <h1 className="header-title">
+          <a href="/">Getting started</a>
+        </h1>
+        <p className="header-subtitle">
+          using{' '}
+          <a href="https://github.com/algolia/instantsearch/tree/master/packages/react-instantsearch">
+            React InstantSearch
+          </a>
+        </p>
+      </header>
+
+      <div className="container">
+        <InstantSearch searchClient={searchClient} indexName="instant_search">
+          <Configure hitsPerPage={8} />
+          <div className="search-panel">
+            <div className="search-panel__filters">
+              <Panel header="brand">
+                <RefinementList attribute="brand" />
+              </Panel>
+            </div>
+
+            <div className="search-panel__results">
+              <AutoComplete
+                openOnFocus={true}
+                insights={true}
+                onOpen={() => {}}
+              >
+                <AutoComplete.SearchBox>
+                  <SearchBox />
+                </AutoComplete.SearchBox>
+
+                {/* Custom layouts */}
+                <AutoComplete.Layout>
+                  <div className="two-column-layout">
+                    <Index indexName="index1">
+                      <Hits hitComponent={HitComponent} />
+                    </Index>
+
+                    <Index indexName="index2">
+                      <Hits hitComponent={HitComponent} />
+                    </Index>
+                  </div>
+                </AutoComplete.Layout>
+
+                {/* Premade layouts */}
+                <AutoComplete.TwoColumnLayout major="index1" minor="index2" />
+
+                <AutoComplete.DefaultLayout
+                  querySuggestions={true}
+                  recentSearches={true}
+                  classNames={{}}
+                />
+              </AutoComplete>
+            </div>
+          </div>
+        </InstantSearch>
+      </div>
+    </div>
+  );
+}
+
+function HitComponent({ hit }) {
+  return (
+    <article>
+      <h1>
+        <a href={`/products.html?pid=${hit.objectID}`}>
+          <Highlight attribute="name" hit={hit} />
+        </a>
+      </h1>
+      <p>
+        <Highlight attribute="description" hit={hit} />
+      </p>
+      <a href={`/products.html?pid=${hit.objectID}`}>See product</a>
+    </article>
+  );
+}
diff --git a/examples/react/autocomplete-poc/src/App (mapped indices).jsx b/examples/react/autocomplete-poc/src/App (mapped indices).jsx
@@ -0,0 +1,112 @@
+import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import React from 'react';
+import {
+  Configure,
+  Highlight,
+  InstantSearch,
+  RefinementList,
+  SearchBox,
+} from 'react-instantsearch';
+
+import { AutoComplete, QuerySuggestions } from './AutoComplete';
+import { Panel } from './Panel';
+
+import 'instantsearch.css/themes/satellite.css';
+
+import './App.css';
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+
+export function App() {
+  return (
+    <div>
+      <header className="header">
+        <h1 className="header-title">
+          <a href="/">Getting started</a>
+        </h1>
+        <p className="header-subtitle">
+          using{' '}
+          <a href="https://github.com/algolia/instantsearch/tree/master/packages/react-instantsearch">
+            React InstantSearch
+          </a>
+        </p>
+      </header>
+
+      <div className="container">
+        <InstantSearch searchClient={searchClient} indexName="instant_search">
+          <Configure hitsPerPage={8} />
+          <div className="search-panel">
+            <div className="search-panel__filters">
+              <Panel header="brand">
+                <RefinementList attribute="brand" />
+              </Panel>
+            </div>
+
+            <div className="search-panel__results">
+              <AutoComplete
+                indices={{
+                  instant_search_1: {
+                    name: 'instant_search',
+                    config: {},
+                    template: List,
+                  },
+                  instant_search_2: {
+                    name: 'instant_search',
+                    config: {},
+                    template: List,
+                  },
+                  query_suggestions: {
+                    config: {},
+                    template: QuerySuggestions,
+                  },
+                }}
+                layout={CustomLayout}
+              />
+            </div>
+          </div>
+        </InstantSearch>
+      </div>
+    </div>
+  );
+}
+
+function CustomLayout({ indices }) {
+  const { instant_search_1, instant_search_2, query_suggestions } = indices;
+
+  return (
+    <div className="two-column-layout">
+      <div className="first-column">
+        <instant_search_1.template />
+      </div>
+      <div className="second-column">
+        <instant_search_2.template />
+      </div>
+      <div className="third-column">
+        <query_suggestions.template />
+      </div>
+    </div>
+  );
+}
+
+function SearchBoxComponent({ searchBoxProps }) {
+  return <SearchBox {...searchBoxProps} />;
+}
+
+function HitComponent({ hit }) {
+  return (
+    <article>
+      <h1>
+        <a href={`/products.html?pid=${hit.objectID}`}>
+          <Highlight attribute="name" hit={hit} />
+        </a>
+      </h1>
+      <p>
+        <Highlight attribute="description" hit={hit} />
+      </p>
+      <a href={`/products.html?pid=${hit.objectID}`}>See product</a>
+    </article>
+  );
+}