Custom app launcher, browser home page, and service monitor.
cute.haus
homelab
react
typescript
autoselect searchbar
Aly Raffauf
(Feb 5, 2026, 12:04 PM EST)
fdf9020e
e60860f4
+7
-1
+7
-1
src/components/SearchBar.tsx
+7
-1
src/components/SearchBar.tsx
···
1
-
import { useState } from "react";
1
+
import { useEffect, useRef, useState } from "react";
2
2
3
3
const engines = [
4
4
{ name: "Google", url: "https://www.google.com/search?q=" },
···
7
7
];
8
8
9
9
export function SearchBar() {
10
+
const inputRef = useRef<HTMLInputElement>(null);
10
11
const [query, setQuery] = useState("");
11
12
const [engine, setEngine] = useState(
12
13
engines.find((e) => e.name === "DuckDuckGo")!,
13
14
);
15
+
16
+
useEffect(() => {
17
+
inputRef.current?.focus();
18
+
}, []);
14
19
15
20
return (
16
21
<form
···
42
47
</select>
43
48
<input
44
49
type="text"
50
+
ref={inputRef}
45
51
value={query}
46
52
onChange={(e) => setQuery(e.target.value)}
47
53
placeholder="Search..."