Find - svelte-pdf-mini

Find.Root creates a FindState that searches page by page from the current one, streaming results. Matches carry PDF quads, so they can be drawn, listed and focused.

Anatomy

<Find.Root bind:query>
	<Find.Input />
	<Find.Count /> <Find.Prev /> <Find.Next />
	<Find.Toggle option="caseSensitive" />
	{#each find.matches as match (match.index)}
		<Find.Result {match} />
	{/each}
	<!-- inside each Viewer.Page -->
	<Find.Layer />
</Find.Root>

<Find.Root bind:query>
	<Find.Input />
	<Find.Count /> <Find.Prev /> <Find.Next />
	<Find.Toggle option="caseSensitive" />
	{#each find.matches as match (match.index)}
		<Find.Result {match} />
	{/each}
	<!-- inside each Viewer.Page -->
	<Find.Layer />
</Find.Root>

Usage

Options: caseSensitive, diacritics, wholeWord, regex — as props or Find.Toggle.
Find.Layer show="all" | "current" | "none" picks which matches are drawn; non-current matches carry data-other; the match snippet lets you draw them yourself.
Ctrl/⌘ + F focuses Find.Input (seeded with the selection); Enter / ↓ and Shift + Enter / ↑ step through matches (not while an input method is composing).
Minimap.Markers find shows every hit on a minimap.

API reference

`Find.Root`

A provider: renders no element of its own.

Prop	Type	Default
`query` bindable Search query. Bindable.	`string`	`''`
`onQueryChange`	`(query: string) => void`	—
`debounce` Debounce in ms. Default 150.	`number`	—
`find` bindable The find state (bind:find to drive it from outside).	`FindState`	—
`caseSensitive` Match case exactly.	`boolean`	—
`diacritics` Match accents exactly (é ≠ e).	`boolean`	—
`wholeWord` Only whole words.	`boolean`	—
`regex` Treat the query as a regular expression (applied to normalized text).	`boolean`	—

`Find.Input`

Renders a <input> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`captureShortcut` Focus this input on Ctrl/⌘ + F while the pointer or focus is in the viewer. Default true.	`boolean`	`true`

Data attributes data-pdf-find-input

`Find.Next`

Renders a <button> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop	Type
`disabled`	`boolean`

Data attributes data-pdf-find-next

`Find.Prev`

Renders a <button> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop	Type
`disabled`	`boolean`

Data attributes data-pdf-find-prev

`Find.Toggle`

Renders a <button> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`option` required	`FindOption`	—

Snippet prop	Type
`pressed`	`boolean`

Data attributes data-activedata-pdf-find-toggle

`Find.Count`

Renders a <div> (or your element via child) and accepts its HTML attributes.

No props of its own besides ref, child and children.

Snippet prop	Type
`current`	`number`
`total`	`number`
`status`	`FindState['status']`

Data attributes data-pdf-find-countdata-status

`Find.Result`

Renders a <button> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`match` required	`FindMatch`	—

Snippet prop	Type
`active`	`boolean`
`match`	`FindMatch`

Data attributes data-activedata-pagedata-partdata-pdf-find-result

`Find.Layer`

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`show` Which matches to draw: every match, only the current one, or none (list-only UIs). Default 'all'.	`'all' \| 'current' \| 'none'`	`'all'`
`match` Custom SVG for a match (inside a viewBox in page points): one `points` string per quad.	`Snippet<[{ match: FindMatch; current: boolean; points: string[] }]>`	—

Data attributes data-currentdata-otherdata-pdf-find-layerdata-pdf-find-match