diff --git a/examples/react/getting-started/index.html b/examples/react/getting-started/index.html
index 0c360b898a..4f864804d6 100644
--- a/examples/react/getting-started/index.html
+++ b/examples/react/getting-started/index.html
@@ -18,6 +18,10 @@
href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css"
/>
+
+
+
+
React InstantSearch — Getting started
diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css
index 3dc8bd058a..28f0782152 100644
--- a/examples/react/getting-started/src/App.css
+++ b/examples/react/getting-started/src/App.css
@@ -113,3 +113,36 @@ em {
height: 100%;
justify-content: space-between;
}
+
+.ais-Hits-item img {
+ width: 100%;
+ height: 100px;
+ object-fit: contain;
+ margin: 1.2rem 0;
+}
+
+.ais-Hits-list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1rem;
+}
+
+.ais-Hits-item {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: space-between;
+ align-items: center;
+ text-align: center;
+}
+
+.ais-Hits-item img {
+ width: 100%;
+ height: 100px;
+ object-fit: contain;
+ margin: 1.2rem 0;
+}
+
+.ais-Hits-item a {
+ font-size: 1.2rem;
+}
diff --git a/examples/react/getting-started/src/App.tsx b/examples/react/getting-started/src/App.tsx
index 2d55e4b9cb..dcafce7044 100644
--- a/examples/react/getting-started/src/App.tsx
+++ b/examples/react/getting-started/src/App.tsx
@@ -1,26 +1,7 @@
-import algoliasearch from 'algoliasearch/lite';
-import { Hit } from 'instantsearch.js';
import React from 'react';
-import {
- Configure,
- Highlight,
- Hits,
- InstantSearch,
- Pagination,
- RefinementList,
- SearchBox,
- TrendingItems,
-} from 'react-instantsearch';
-
-import { Panel } from './Panel';
import './App.css';
-const searchClient = algoliasearch(
- 'latency',
- '6be0576ff61c053d5f9a3225e2a90f76'
-);
-
export function App() {
return (
@@ -37,67 +18,8 @@ export function App() {
);
}
-
-type HitType = Hit<{
- image: string;
- name: string;
- description: string;
-}>;
-
-function HitComponent({ hit }: { hit: HitType }) {
- return (
-
-
-
-
-
- See product
-
- );
-}
-
-function ItemComponent({ item }: { item: Hit }) {
- return (
-
-
-

-
{item.name}
-
- See product
-
- );
-}
diff --git a/packages/instantsearch.js/src/index.ts b/packages/instantsearch.js/src/index.ts
index 38919692b6..17bc1f9766 100644
--- a/packages/instantsearch.js/src/index.ts
+++ b/packages/instantsearch.js/src/index.ts
@@ -1,3 +1,5 @@
+import algoliasearch from 'algoliasearch';
+
import * as connectors from './connectors/index';
import * as helpers from './helpers/index';
import { createInfiniteHitsSessionStorageCache } from './lib/infiniteHitsCache/index';
@@ -77,4 +79,39 @@ instantsearch.snippet = helpers.snippet;
instantsearch.reverseSnippet = helpers.reverseSnippet;
instantsearch.insights = helpers.insights;
+const config = {
+ appId: (document.querySelector('meta[name="appId"]') as HTMLMetaElement)
+ .content,
+ apiKey: (document.querySelector('meta[name="apiKey"]') as HTMLMetaElement)
+ .content,
+};
+
+const searchClient = algoliasearch(config.appId, config.apiKey);
+const search = instantsearch({
+ // This is hardcoded for the purpose of the PoC, wouldn't be in a real bundle
+ indexName: 'fx_hackathon_24_bm_products',
+ searchClient,
+});
+
+const observer = new MutationObserver(() => {
+ const block = document.getElementById('block');
+
+ if (!block) {
+ return;
+ }
+
+ observer.disconnect();
+ search.addWidgets([
+ // @ts-ignore
+ // Path is hardcoded for the purpose of the PoC as well
+ widgets.page({ container: block, path: 'excellent-apple.html' }),
+ ]);
+ search.start();
+});
+
+observer.observe(document.documentElement, {
+ childList: true,
+ subtree: true,
+});
+
export default instantsearch;