Connect Reader Navigation

Task

Wire the prepared previous/next controls to EPUB.js navigation.

Use the rendition methods:

await renditionRef.current?.prev();

and:

await renditionRef.current?.next();

Listen for location changes:

rendition.on("relocated", (location) => {
  // Save the current CFI for the progress module.
});

Keep navigation state in React only when the UI needs to reflect it. EPUB.js remains the source of truth for the current rendered location.

The bottom Reader controls should remain visible and clickable.

Test

Open a book and use:

• next page
• previous page
• repeated navigation
• chapter boundaries

Confirm the Reader content changes without a full page reload.

Checkpoint

The Reader’s existing navigation controls now control a real EPUB.js rendition.