Comic Viewer Demo

Cover before the spreads

spreadStartIndex is the page every spread is counted from. The default 0 pairs the pages from the very first one, while the 1 used here leaves the first page on its own as a cover and pairs the pages that follow it. A page left unpaired at either end keeps the half of the spread it would have in a printed book instead of sitting in the middle.

Source code

import * as ComicViewer from "@publira/comic-viewer";

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages} spreadStartIndex={1}>
    <ComicViewer.Viewport />
    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);