algolia · dylantientcheu · Feb 6, 2025 · Feb 5, 2025 · Feb 6, 2025 · Feb 6, 2025
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DocSearch v3 - React</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
@@ -0,0 +1,23 @@
+{
+  "name": "@docsearch/react-18-example",
+  "description": "DocSearch v3 React 18 example",
+  "version": "3.8.3",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@docsearch/css": "workspace:*",
+    "@docsearch/react": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7"
+  }
+}
@@ -0,0 +1,4 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
@@ -0,0 +1,15 @@
+import { DocSearch } from '@docsearch/react';
+import React from 'react';
+import './App.css';
+import '@docsearch/css/dist/style.css';
+
+function App(): React.JSX.Element {
+  return (
+    <div>
+      <h1>DocSearch v3 - React - 18</h1>
+      <DocSearch indexName="vuejs" appId="ML0LEBN7FQ" apiKey="21cf9df0734770a2448a9da64a700c22" insights={true} />
+    </div>
+  );
+}
+
+export default App;
@@ -0,0 +1,11 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src",
+    "vite.config.ts"
+  ],
+}
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
@@ -13,8 +13,8 @@
   "dependencies": {
     "@docsearch/css": "3.8.3",
     "@docsearch/react": "3.8.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",

@@ -1,5 +1,5 @@
 import { DocSearch } from '@docsearch/react';
-
+import type { JSX } from 'react';
 import './App.css';
 import '@docsearch/css/dist/style.css';
 

@@ -43,8 +43,8 @@
     "@rollup/plugin-terser": "0.4.4",
     "@stylistic/eslint-plugin": "2.13.0",
     "@testing-library/dom": "10.4.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "8.20.0",
     "@typescript-eslint/parser": "8.20.0",
     "babel-plugin-module-resolver": "5.0.2",
@@ -66,8 +66,8 @@
     "lerna": "8.1.9",
     "postcss": "8.5.1",
     "prettier": "3.4.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "4.31.0",
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-filesize": "10.0.0",

@@ -48,9 +48,9 @@
     "vitest": "3.0.2"
   },
   "peerDependencies": {
-    "@types/react": ">= 16.8.0 < 19.0.0",
-    "react": ">= 16.8.0 < 19.0.0",
-    "react-dom": ">= 16.8.0 < 19.0.0",
+    "@types/react": ">= 16.8.0 < 20.0.0",
+    "react": ">= 16.8.0 < 20.0.0",
+    "react-dom": ">= 16.8.0 < 20.0.0",
     "search-insights": ">= 1 < 3"
   },
   "peerDependenciesMeta": {

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 type AlgoliaLogoTranslations = Partial<{
   searchByText: string;

@@ -1,6 +1,6 @@
 import type { AutocompleteState, AutocompleteOptions } from '@algolia/autocomplete-core';
 import type { LiteClient, SearchParamsObject } from 'algoliasearch/lite';
-import React from 'react';
+import React, { type JSX } from 'react';
 import { createPortal } from 'react-dom';
 
 import { DocSearchButton } from './DocSearchButton';

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { type JSX, useEffect, useState } from 'react';
 
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';

@@ -1,6 +1,6 @@
 import { type AlgoliaInsightsHit, createAutocomplete } from '@algolia/autocomplete-core';
 import type { SearchResponse } from 'algoliasearch/lite';
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
 import type { DocSearchProps } from './DocSearch';

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { ErrorIcon } from './icons';
 

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { AlgoliaLogo } from './AlgoliaLogo';
 

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import type { InternalDocSearchHit, StoredDocSearchHit } from './types';
 

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { NoResultsIcon } from './icons';
 import type { ScreenStateProps } from './ScreenState';

@@ -1,5 +1,5 @@
 import type { AutocompleteApi, AutocompleteState, BaseItem } from '@algolia/autocomplete-core';
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import type { DocSearchProps } from './DocSearch';
 import { Snippet } from './Snippet';

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { SelectIcon, SourceIcon } from './icons';
 import { Results } from './Results';

@@ -1,6 +1,5 @@
 import type { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
-import type { MutableRefObject } from 'react';
-import React from 'react';
+import React, { type JSX, type RefObject } from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
 import { LoadingIcon } from './icons/LoadingIcon';
@@ -20,7 +19,7 @@ interface SearchBoxProps
   extends AutocompleteApi<InternalDocSearchHit, React.FormEvent, React.MouseEvent, React.KeyboardEvent> {
   state: AutocompleteState<InternalDocSearchHit>;
   autoFocus: boolean;
-  inputRef: MutableRefObject<HTMLInputElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
   onClose: () => void;
   isFromSelection: boolean;
   translations?: SearchBoxTranslations;

@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import { type JSX, createElement } from 'react';
 
 import type { StoredDocSearchHit } from './types';
 

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { RecentIcon, ResetIcon, StarIcon } from './icons';
 import { Results } from './Results';

@@ -1,5 +1,5 @@
 import { render, act, fireEvent, screen, cleanup } from '@testing-library/react';
-import React from 'react';
+import React, { type JSX } from 'react';
 import { describe, it, expect, afterEach } from 'vitest';
 
 import '@testing-library/jest-dom/vitest';

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function ControlKeyIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function ErrorIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function GoToExternal(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function LoadingIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function NoResultsIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function RecentIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function ResetIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function SearchIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function SelectIcon(): JSX.Element {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 const LvlIcon: React.FC = () => {
   return (

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function StarIcon(): JSX.Element {
   return (

@@ -5,7 +5,7 @@ export interface UseDocSearchKeyboardEventsProps {
   onOpen: () => void;
   onClose: () => void;
   onInput?: (event: KeyboardEvent) => void;
-  searchButtonRef?: React.RefObject<HTMLButtonElement>;
+  searchButtonRef: React.RefObject<HTMLButtonElement | null>;
 }
 
 function isEditingContent(event: KeyboardEvent): boolean {