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 to get exactly this book.

OpenPageFlip

Drag a corner, click, or swipe.

Page 2

Drag a corner, click, or swipe.

Page 3

Drag a corner, click, or swipe.

Page 4

Drag a corner, click, or swipe.

Page 5

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

Page 6

Drag a corner, click, or swipe.

Page 7

Drag a corner, click, or swipe.

Page 8

Drag a corner, click, or swipe.

Page 9

Drag a corner, click, or swipe.

The end

Drag a corner, click, or swipe.

Page 1 of 10state: readorientation: landscape

API

flipPrevflipNextturnTo last (no animation)

Look

Cover

Stretched to the container; width and height set the page's ratio.

Width 300Height 420ShadowsShadow opacity 1

Motion

Flip duration 1000 ms

Input

DragSwipeSwipe distance 30Hover cornersLeave 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",
  cover: true,
  flipDuration: 1000,
  easing: (t) => t,
  shadows: true,
  shadowOpacity: 1,
  click: "anywhere",
  drag: true,
  swipe: true,
  swipeDistance: 30,
  hoverCorners: true,
});

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

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