Playground

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.

OpenPageFlip

Grab the outer edge and pull, click it, or swipe.

Page 2

Grab the outer edge and pull, click it, or swipe.

Page 3

Grab the outer edge and pull, click it, or swipe.

Page 4

Grab the outer edge and pull, click it, or swipe.

Page 5

Clicked 0 times
With "Leave form controls alone" on, this button never starts a flip.

Page 6

Grab the outer edge and pull, click it, or swipe.

Page 7

Grab the outer edge and pull, click it, or swipe.

Page 8

Grab the outer edge and pull, click it, or swipe.

Page 9

Grab the outer edge and pull, click it, or swipe.

The end

Grab the outer edge and pull, click it, or swipe.

Page 1 of 10state: readorientation: landscape

flipProgress

API

flipPrevflipNextturnTo last (no animation)

Look

Cover

Stretched to fit the container - width and height only set the page's ratio.

Width 300Height 420ShadowsShadow opacity 0.35

Motion

Flip duration 1000 ms

Input

DragSwipeSwipe distance 30Furl on hoverLeave form controls alone

Events

import "@openpageflip/core/styles.css";
import { createBook } from "@openpageflip/core";

const book = createBook(container, {
  width: 300,
  height: 420,
  size: "stretch",
  layout: "auto",
  binding: "left",
  cover: true,
  flipDuration: 1000,
  easing: (t) => t,
  shadows: true,
  shadowOpacity: 0.35,
  click: "edges",
  drag: true,
  swipe: true,
  swipeDistance: 30,
  hover: true,
});

import "@openpageflip/core/styles.css";
import { FlipBook, Page } from "@openpageflip/react";

<FlipBook
  width={300}
  height={420}
  size="stretch"
  layout="auto"
  binding="left"
  cover
  flipDuration={1000}
  easing={(t) => t}
  shadows
  shadowOpacity={0.35}
  click="edges"
  drag
  swipe
  swipeDistance={30}
  hover
>
  {/* one child per page; <Page density="hard"> for covers */}
</FlipBook>