Skip to content
OpenPageFlip

React

The React package needs React 19, and the core package installed next to it.

Terminal window
npm i @openpageflip/core @openpageflip/react

A book is a component

Section titled “A book is a component”

Every direct child of FlipBook is a page. Wrap one in Page when it needs to be hard, or when you want a class or style on the page element itself. Nothing needs a ref or forwardRef. Here’s the component running, and the file that renders it:

OpenPageFlip

A page-turn effect for React

Every child is a page

Wrap one in Page to make it hard, or to put a class or style on the page element itself.

No refs on pages

The book owns the page elements. Your components render inside them.

Props are options

Change one and the book is rebuilt on the same page. Children can change whenever.

Renders on the server

This page was server-rendered by the docs site and hydrated after.

The end

Quickstart.tsx
import "@openpageflip/core/styles.css";
import { type Book, FlipBook, Page } from "@openpageflip/react";
import { useRef } from "react";


export default function Quickstart() {
  const book = useRef<Book>(null);
  return (
    <>
      <FlipBook ref={book} className="book" width={400} height={560} size="stretch" cover>
        <Page density="hard" className="page page-cover">
          <h2>OpenPageFlip</h2>
          <p>A page-turn effect for React</p>
        </Page>
        <Page className="page">
          <h3>Every child is a page</h3>
          <p>
            Wrap one in Page to make it hard, or to put a class or style on the page element itself.
          </p>
        </Page>
        <Page className="page">
          <h3>No refs on pages</h3>
          <p>The book owns the page elements. Your components render inside them.</p>
        </Page>
        <Page className="page">
          <h3>Props are options</h3>
          <p>Change one and the book is rebuilt on the same page. Children can change whenever.</p>
        </Page>
        <Page className="page">
          <h3>Renders on the server</h3>
          <p>This page was server-rendered by the docs site and hydrated after.</p>
        </Page>
        <Page density="hard" className="page page-cover">
          <p>The end</p>
        </Page>
      </FlipBook>
      <p className="controls">
        <button type="button" onClick={() => book.current?.flipPrev()}>
          Previous
        </button>
        <button type="button" onClick={() => book.current?.flipNext()}>
          Next
        </button>
      </p>
    </>
  );
}

What the props do

Section titled “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 shows the two working together.
  • Each core event is a prop: onInit, onUpdate, onFlip, onFlipProgress, onChangeState, onChangeOrientation. onFlipProgress runs every frame of a turn, and the shadow example shows what it’s for.
  • 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, generated from the source.