searchParams
PRISM threads ?q=… from the URL into props.searchParams. The page filters a list and renders fresh HTML on every submit — no client JS, no loader needed for this shape.
Tip
searchParams are available without a loader: PRISM passes them straight from the URL. If a param can appear more than once (e.g. ?tag=a&tag=b) its value is string[] — check with Array.isArray before using.
Output
24 matches
- apple
- apricot
- avocado
- banana
- blackberry
- blueberry
- cherry
- coconut
- cranberry
- fig
- grape
- guava
- kiwi
- lemon
- mango
- orange
- papaya
- peach
- pear
- pineapple
- plum
- raspberry
- strawberry
- watermelon
// PRISM threads ?q=… into props.searchParams — no loader needed.
export default function Page(props: {
searchParams?: { q?: string };
}) {
const q = props.searchParams?.q ?? "";
const items = q
? FRUITS.filter((f) => f.toLowerCase().includes(q.toLowerCase()))
: FRUITS;
return (
<form method="get">
<input name="q" value={q} placeholder="search fruits…" />
<button type="submit">search</button>
<p>{items.length} {items.length === 1 ? "match" : "matches"}{q ? ` for "${q}"` : ""}</p>
<ul>{items.map((i) => <li>{i}</li>)}</ul>
</form>
);
}