Questions
Is this StPageFlip?
It's a rebuild of it. StPageFlip and react-pageflip haven't had a commit since April 2021, so we kept the part that makes the fold look right (the geometry maths, still MIT, still Oleg Litovski's) and rewrote everything around it in strict TypeScript. The look is held to the original by a test that runs the published page-flip 2.0.7 next to this library and compares screenshots, and the handful of places where we chose to differ are written down.
Can I drop it in where page-flip or react-pageflip was?
Not without changes. The options and methods have new names and there's no compatibility layer for the old ones, so it's a small migration rather than a version bump. The migration guide is a table of every old name and where it went.
Does it work without React?
Yes. The core package is plain TypeScript with nothing framework-shaped in it, so it works from Vue, Svelte, or a page with no framework at all. There's also a single-file build for a script tag that puts createBook on window.OpenPageFlip, for when there's no bundler.
What does the React package need?
React 19, and the core package installed beside it. Every direct child of FlipBook is a page and every core option is a prop. Your page components don't need refs or forwardRef; the wrapper owns the page elements.
Does it render on the server (Next.js, Astro)?
Yes. Nothing in either package touches window when it's imported, and FlipBook ships with "use client" and renders to HTML on the server. The React demo on this site is server-rendered by Astro and hydrated after, and the test suite renders it with renderToString in Node.
Does it work on phones?
Yes. Input is pointer events, so mouse, touch and pen all drag a page from its edge, and on touch a quick swipe across the pages from anywhere turns it. Leave layout on auto and the book shows a spread when the container has room for two pages and a single page when it doesn't.
Can pages hold links, buttons and forms?
Yes. A press that starts on a link, button or form field never starts a flip, so the control just works. That's the ignoreDragOn option. Its default selector is in the reference, and it includes a data attribute you can put on anything else you want left alone.
How do I get hard covers?
Set cover to true so the first and last pages stand on their own, and give a page data-density="hard" (or density="hard" on Page in React) to make it stiff. Hard and soft pages mix fine in one book.
Can a page be an image?
A page is any element, so an img works, and so does anything else you can put in the DOM. Everything is drawn with the DOM; there's no canvas renderer.
Does it respect reduced motion?
Yes. With prefers-reduced-motion on, a flip lands instantly instead of animating. Keyboard navigation and ARIA labelling aren't done yet - they're on the list before 1.0.
What does an idle book cost?
Nothing. Frames are drawn only when something changes, never on a timer, and destroy() stops everything and puts your DOM back the way it was.
Is it ready for production?
It's pre-1.0. The rendering is pixel-matched to the original, but the version stays at 0.x until the backlog of issues from the original projects is closed. Everything is verified in Chromium so far; Firefox and WebKit runs are still to come.
What's the licence?
MIT, same as the original. The fold geometry derives from StPageFlip, and the licence file credits it.