Skip to content

Releases: piro0919/react-comic-viewer

Release list

v1.1.0

Choose a tag to compare

@piro0919 piro0919 released this 22 Aug 23:20

The viewer used to own currentPage and isExpansion outright. You could set an
initial page, but you could not move it afterwards — no jumping from a table of
contents, no syncing with the URL, no refusing a move. This release opens that up.

Nothing here is breaking. Existing code keeps working untouched.

Controlled mode

Pass currentPage or isExpansion and the viewer stops writing that value. It
renders what you give it, and its onChange becomes a request you are free to
ignore.

const [currentPage, setCurrentPage] = useState(0);

<ComicViewer
  currentPage={currentPage}
  pages={pages}
  onChangeCurrentPage={setCurrentPage}
/>;

Each prop is independent: controlling currentPage leaves isExpansion
uncontrolled, and the other way around. Omit both and the viewer behaves exactly
as before, using initialCurrentPage and initialIsExpansion.

Observing a move before it happens

onTryMoveNextPage and onTryMovePrevPage fire before the page changes, which
is where prefetching or gating a chapter belongs.

Rendering your own pages

An entry of pages may now be a function receiving the class name the viewer
would have applied to its own <img>, so you can bring your own element for
lazy loading or a custom placeholder.

const pages: PageRenderer[] = urls.map(
  (url) =>
    ({ className }) =>
      <img src={url} alt="" className={className} loading="lazy" />,
);

The function is called during render, so it may not use hooks.


Full docs: https://github.com/piro0919/react-comic-viewer#readme
Demo: https://react-comic-viewer.kkweb.io