Mischief

20 / Documents

Document Splits

Mark where one scanned batch becomes several documents. Splits are toggled between pages and the segments update as you go.

Live previewSource

2 documents

Document 1 · 2 pages

12

Document 2 · 4 pages

3456

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Batch({ pages }: { pages: SplitPage[] }) {
  return <DocumentSplits pages={pages} onSplitChange={saveSplits} />
}

API

pagesSplitPage[]Page number, optional thumbnail src, and optional label.
splitAfter, defaultSplitAfternumber[]Page numbers a split follows, controlled or uncontrolled.
onSplitChange(splitAfter: number[]) => voidRuns with the sorted boundaries whenever they change.
segmentLabel(segment: DocumentSegment) => ReactNodeReplaces the default heading above each document.
renderImage(props) => ReactNodeUses a framework image component for thumbnails.

Accessibility

Each split control is a toggle button naming the page it follows, so the action is clear without seeing the layout. No control is offered after the final page, since a split there would mean nothing. Segment headings state the document number and page count as text.

Dependencies

lucide-react