Skip to content
OpenPageFlip

React

The React package needs React 19 and the core package beside 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. Page marks the hard ones and puts a class or style on the page element itself. Nothing needs a ref or forwardRef. This is 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 style 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 rebuilds on the same page. Children can change freely.

Renders on the server

This page was server-rendered by the docs site, then hydrated.

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 style 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 rebuilds on the same page. Children can change freely.</p>
        </Page>
        <Page className="page">
          <h3>Renders on the server</h3>
          <p>This page was server-rendered by the docs site, then hydrated.</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 option of the core package is a prop. Changing one rebuilds the book on the same page. Children can change freely.
  • ref gives you the core Book: flipNext, flipTo, page, on and the rest.
  • page makes the book controlled, and onFlip reports the first page of the spread that landed. See the controlled page example.
  • 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, then hydrated.

Every prop is described in the reference, straight from the source.