Quick Look
A file grid with a large preview overlay for images, document pages, numbered code and audio waveforms, with arrow-key browsing, a filename and meta bar, open, download and share actions, and Escape back to the grid.
Preview
Shared with you
Space to preview · ← → to browse
Press Space to preview, Enter to open.
debounce.ts
412 B · TypeScript · 3 of 8
// Debounce a callback so it runs once input settles.export function debounce<T extends unknown[]>(fn: (...args: T) => void, wait = 200) { let timer: ReturnType<typeof setTimeout> | undefined; return (...args: T) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), wait); };} // Usageconst save = debounce((text: string) => draft.set(text), 400);debounce.ts, 3 of 8
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| files | { id, name, kind: "image" | "document" | "code" | "audio" | "other", size?, meta?, preview, thumbnail? }[] | — | The files. Use QuickLookCode, QuickLookDocument, QuickLookAudio or your own preview. Required. |
| selected / defaultSelected / onSelectedChange | number / number / (index) => void | — / 0 / — | The selected tile. |
| defaultOpenIndex / onOpenChange | number | null / (open) => void | null / — | Start with the preview open on this file. |
| onOpenFile / onDownload / onShare | (file) => void | — | Each shows its action; Enter on a tile calls onOpenFile. |
| container | "viewport" | "parent" | "viewport" | Modal over the page, or inside the grid's frame. |
| autoFocus | boolean | true | Focus the preview when it starts open. |
| columns | number | 4 | Grid columns (also the Up/Down step). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.