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 reference lists every option with its default, straight from the source.
Does it work without React?
Yes. The core package is plain TypeScript with no framework 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 a CDN and 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 then hydrated, 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 corner, and a quick horizontal swipe turns the page. With layout left at auto the book shows a spread when the container is wide enough for two pages and a single page when it isn'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, and its default selector also matches anything with a data-opf-no-flip attribute, so you can opt other elements out too.
How do I get hard covers?
Set cover to true so the first and last pages show on their own, and give a page data-density="hard" (or the density prop on Page in React) to make it rigid. Hard and soft pages can be mixed in one book.
Can a page be an image?
A page is any element, so an img tag works, and so does anything else you can put in the DOM. Everything is drawn with the DOM; there is no canvas renderer.
Does it respect reduced motion?
Yes. When prefers-reduced-motion is 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, the same as the original. The fold geometry derives from StPageFlip, and the licence credits it.