A page-turn effect for the web
Pick up any corner and pull. Let go past the middle and the page turns; let go early and it settles back.
A click on either half turns the page that way. On a touch screen, a swipe does the same.
Covers are hard, so they swing as one stiff sheet. Inner pages bend along the fold, the way paper does.
Pages are ordinary elements. Text, images, forms, video - whatever a page holds keeps working.
The end
A page-turn effect for React
Wrap one in Page to make it hard, or to put a class or style on the page element itself.
The book owns the page elements. Your components render inside them.
Change one and the book is rebuilt on the same page. Children can change whenever.
This page was server-rendered by the docs site and hydrated after.
The end
); } ``` ## What the props do [Section titled “What the props do”](#what-the-props-do) * Every core option is a prop. Change one and the book is rebuilt on the same page it was showing. Children can change whenever. * `ref` gives you the core `Book`, so `flipNext`, `flipTo`, `page`, `on` and the rest are right there. * `page` makes the book controlled, and `onFlip` tells you the first page of the spread that landed. The [controlled page example](/examples/controlled-page/) shows the two working together. * Each core event is a prop: `onInit`, `onUpdate`, `onFlip`, `onChangeState`, `onChangeOrientation`. * The component ships with `"use client"` and renders on the server. The demo above was server-rendered by this site and hydrated after. Every prop is in the [reference](/api/openpageflip/react/), generated from the source. # Controlled page > Drive a React FlipBook from state, and let onFlip keep that state honest when the reader turns pages by hand. When `page` changes, the book flips there. When the reader turns a page by hand, `onFlip` reports the first page of the spread that landed, so the state follows the book as much as the book follows the state. Try picking a chapter that sits on the right-hand side of a spread - the number settles on the spread’s first page, not the one you picked. Controlled.tsx ```tsx import "@openpageflip/core/styles.css"; import { FlipBook, Page } from "@openpageflip/react"; import { useState } from "react"; const chapters = [ "Cover", "Chapter one", "Chapter two", "Chapter three", "Chapter four", "The end", ]; export default function Controlled() { const [page, setPage] = useState(0); return ( <> {/* `page` drives the book; `onFlip` reports where it landed, so the two never disagree. */}
Showing page {page + 1} of {chapters.length}
); } ``` # Playground > Every option as a control, the book's API as buttons, and the code that gives you exactly what you're looking at. Change anything and the book is rebuilt with the new options, on the page it was showing. The code at the bottom is generated from the controls, so it always matches the book above it - copy it into your app and you get exactly this book. # One page at a time > A book that stays one page wide on any screen and only turns from its corners, so the page itself is free for reading. Some books shouldn’t open into a spread - a phone-sized reader, say, where one page is the whole point. This one stays single however wide the container gets, and only the corners turn it, so clicking, selecting and following links in the middle of the page just work. On a mouse, hovering a corner lifts it so you can see where to grab. single-page.ts ```ts import "@openpageflip/core/styles.css"; import { type Book, createBook } from "@openpageflip/core"; export function mount(container: HTMLElement): Book { return createBook(container, { width: 360, // the page's ratio, and with maxWidth below, its largest size height: 480, size: "stretch", // shrinks to fit a phone maxWidth: 360, // but never grows past one phone-sized page layout: "single", // one page, however wide the container is click: "corners", // the middle of the page is left to whatever it holds }); } ```