File Search
A search box that streams matching keys with switchable match modes — driven by useFiles.
Streams search() results into a list. Switch between substring, glob, regex and exact matching, toggle case sensitivity, and the previous search is aborted the moment a new one starts.
"use client";import { useFiles } from "files-sdk/react";import { useState } from "react";import { FileSearch } from "@/components/files-sdk/file-search";const Example = () => { const files = useFiles({ endpoint: "/api/files" }); const [selected, setSelected] = useState<string>(); return ( <div className="flex flex-col gap-3"> <FileSearch files={files} onSelect={(file) => setSelected(file.key)} /> {selected && ( <p className="text-muted-foreground text-xs">Selected: {selected}</p> )} </div> );};export default Example;Installation
npx shadcn@latest add https://files-sdk.dev/r/file-search.jsonpnpm dlx shadcn@latest add https://files-sdk.dev/r/file-search.jsonbunx --bun shadcn@latest add https://files-sdk.dev/r/file-search.jsonUsage
import { useFiles } from "files-sdk/react";
import { FileSearch } from "@/components/files-sdk/file-search";
export function Search() {
const files = useFiles({ endpoint: "/api/files" });
return (
<FileSearch
files={files}
prefix="docs/"
defaultMatch="glob"
onSelect={(file) => console.log(file.key)}
/>
);
}Matching runs over keys, not contents — the same four modes search() exposes. Scope a search with prefix to keep it cheap on large buckets, and maxResults caps how many matches are collected per run.
Props
Prop
Type