Docs / Data and layout / Document Splits

Document Splits

Organize long documents into named splits. Drag pages between groups, reorder groups with the handles, or use the move, split, and remove controls. Dark mode is controlled by the parent through isDark; the checkbox below is the page's own control.

Dark mode

Loading the sample PDF…

Differences from upstream

Same export name, DocumentSplits. class is accepted alongside the upstream className. splits, activePage, onSelectPage, and onSplitsChange are required, as in the upstream API table.
Native HTML5 drag-and-drop replaces dnd-kit, and every drag has a button equivalent (move up/down/left/right, move to the previous/next split) for keyboard use.
activePage highlights that page (0 for none); the upstream component lists the prop but does not render it.
Port additions: rename a split through its title input, split a group in two at the midpoint, and pdfUrl, which renders each page lazily through FileThumbnail when thumbnailImages has no cached image for it.
Dark mode is set by the parent through isDark; there is no theme switch inside the component.
Port-only exports, the pure split helpers behind every edit (upstream keeps them private): addSplit, areSplitGroupsEqual, arrayMove, createPageRangeLabel, findGroupId, getGroupPages, getPageNumber, movePage, movePageToAdjacentGroup, movePageToGroup, nextSplitId, removeSplit, renameSplit, reorderPageInGroup, reorderSplits, and splitGroup.

Back to all components