This is the full developer documentation for OpenPageFlip # OpenPageFlip > The page-turn effect from StPageFlip, rebuilt for the browsers, TypeScript and React we have now. The book below is the real thing - grab a corner and pull. # AI assistants > Where to point Claude Code, Cursor, Copilot or whatever agent you use, so it builds a book from these docs instead of from memory. Most assistants have seen StPageFlip and react-pageflip, and honestly that’s the problem: this library isn’t either of them. The names are different and there’s no compatibility layer, so an agent working from memory writes against an API that isn’t there. The fix is just pointing it at these docs before it writes anything. ## The docs as plain text [Section titled “The docs as plain text”](#the-docs-as-plain-text) Every page here is also served as Markdown, generated from the same source at every build, so an agent can read it without scraping HTML. * [`https://openpageflip.shittylittleapps.com/llms.txt`](/llms.txt): the index. A short description and links to the other two. If you’re not sure which to give it, give it this one. * [`https://openpageflip.shittylittleapps.com/_llms-txt/guides.txt`](/_llms-txt/guides.txt): the quick starts and the examples, without the API reference. Small enough to read whole, and enough to build a book from. * [`https://openpageflip.shittylittleapps.com/llms-full.txt`](/llms-full.txt): everything, API reference included. Tools that index docs from a URL (Cursor’s docs setting, for one) can be given the site address, [`https://openpageflip.shittylittleapps.com`](https://openpageflip.shittylittleapps.com), and will find the same pages. ## Tell it once [Section titled “Tell it once”](#tell-it-once) Put this in the file your agent reads at the start of every session - `CLAUDE.md`, `AGENTS.md`, `.github/copilot-instructions.md`, a Cursor rule, whichever yours is - and you don’t have to say it again. AGENTS.md ```md ## OpenPageFlip Page-flip effect for HTML content: `@openpageflip/core` (plain JavaScript) and `@openpageflip/react` (React 19). It is not StPageFlip or page-flip: the API is different, so read the docs before writing code. - Guides and examples: https://openpageflip.shittylittleapps.com/_llms-txt/guides.txt - Everything, API reference included: https://openpageflip.shittylittleapps.com/llms-full.txt ``` ## Or ask once [Section titled “Or ask once”](#or-ask-once) For a one-off, a prompt that starts with the docs does the same job. Fill in the bits in angle brackets. prompt ```text Read https://openpageflip.shittylittleapps.com/_llms-txt/guides.txt and then add an OpenPageFlip book to whose pages are . Follow those docs rather than what you know about StPageFlip or page-flip; the API is different. ``` # Plain JavaScript > Install the core package, put your pages in a container, and hand it to createBook. That's most of it. * npm ```sh npm i @openpageflip/core ``` * pnpm ```sh pnpm add @openpageflip/core ``` * yarn ```sh yarn add @openpageflip/core ``` ## Pages are elements [Section titled “Pages are elements”](#pages-are-elements) Put the pages inside one container, in reading order. Any element can be a page - a div, an img, a whole article. Give a page `data-density="hard"` and it turns as one stiff sheet instead of bending, which is what you want for covers. index.html ```html

OpenPageFlip

A page-turn effect for the web

Drag a corner

Pick up any corner and pull. Let go past the middle and the page turns; let go early and it settles back.

Or just click

A click on either half turns the page that way. On a touch screen, a swipe does the same.

Hard and soft

Covers are hard, so they swing as one stiff sheet. Inner pages bend along the fold, the way paper does.

Any HTML

Pages are ordinary elements. Text, images, forms, video - whatever a page holds keeps working.

The end

``` ## Make the book [Section titled “Make the book”](#make-the-book) Import the stylesheet once (it only handles the geometry, so your pages look however you style them), then hand the container to `createBook`. The book below runs this exact file, and so does the test suite. quickstart.ts ```ts import "@openpageflip/core/styles.css"; import { type Book, createBook } from "@openpageflip/core"; /** The container's children are the pages, in reading order. */ export function mount(container: HTMLElement): Book { return createBook(container, { width: 400, // base page size; with size "stretch" only the ratio matters height: 560, size: "stretch", // scale to the container, portrait when it gets narrow cover: true, // first and last pages stand alone }); } ``` ## Then [Section titled “Then”](#then) What comes back is a [`Book`](/api/openpageflip/core/type-aliases/book/): * `flipNext()`, `flipPrev()` and `flipTo(page)` animate a turn and give you a promise that resolves when the page lands. `turnTo(page)` just jumps there. * `book.on("flip", ({ page }) => ...)` fires whenever a different spread is showing. `on` hands back the unsubscribe function. * A press that starts on a link, button or form field never starts a flip, so pages can hold real controls. * `book.destroy()` stops everything and puts your DOM back the way it was. Every option and event is in the [reference](/api/openpageflip/core/), generated from the source on every build. ## Without a bundler [Section titled “Without a bundler”](#without-a-bundler) There’s also a single-file build for a script tag. It puts `createBook` on `window.OpenPageFlip` and otherwise works the same. index.html ```html ``` # Questions > Short answers to the things people ask first - how this relates to StPageFlip, what each package needs, and what isn't done yet. ## Is this StPageFlip? It's a rebuild of it. StPageFlip and react-pageflip haven't had a commit since April 2021, so we kept the part that makes the fold look right (the geometry maths, still MIT, still Oleg Litovski's) and rewrote everything around it in strict TypeScript. The look is held to the original by a test that runs the published page-flip 2.0.7 next to this library and compares screenshots, and the handful of places where we chose to differ are written down. [The differences, in the spec](https://github.com/benhonda/openpageflip/blob/main/SPEC.md) ## Can I drop it in where page-flip or react-pageflip was? Not without changes. The options and methods have new names and there's no compatibility layer for the old ones, so it's a small migration rather than a version bump. The migration guide is a table of every old name and where it went. [The migration guide](/start/migrate/) ## Does it work without React? Yes. The core package is plain TypeScript with nothing framework-shaped in it, so it works from Vue, Svelte, or a page with no framework at all. There's also a single-file build for a script tag that puts createBook on window\.OpenPageFlip, for when there's no bundler. [Using it without a bundler](/start/core/#without-a-bundler) ## What does the React package need? React 19, and the core package installed beside it. Every direct child of FlipBook is a page and every core option is a prop. Your page components don't need refs or forwardRef; the wrapper owns the page elements. [The React quick start](/start/react/) ## Does it render on the server (Next.js, Astro)? Yes. Nothing in either package touches window when it's imported, and FlipBook ships with "use client" and renders to HTML on the server. The React demo on this site is server-rendered by Astro and hydrated after, and the test suite renders it with renderToString in Node. ## Does it work on phones? Yes. Input is pointer events, so mouse, touch and pen all drag a corner, and a quick horizontal swipe turns the page. Leave layout on auto and the book shows a spread when the container has room for two pages and a single page when it doesn't. [Every option, in the playground](/examples/playground/) ## Can pages hold links, buttons and forms? Yes. A press that starts on a link, button or form field never starts a flip, so the control just works. That's the ignoreDragOn option. Its default selector is in the reference, and it includes a data attribute you can put on anything else you want left alone. [ignoreDragOn in the reference](/api/openpageflip/core/type-aliases/bookoptions/#ignoredragon) ## How do I get hard covers? Set cover to true so the first and last pages stand on their own, and give a page data-density="hard" (or density="hard" on Page in React) to make it stiff. Hard and soft pages mix fine in one book. [The plain JavaScript quick start](/start/core/) ## Can a page be an image? A page is any element, so an img works, and so does anything else you can put in the DOM. Everything is drawn with the DOM; there's no canvas renderer. ## Does it respect reduced motion? Yes. With prefers-reduced-motion on, a flip lands instantly instead of animating. Keyboard navigation and ARIA labelling aren't done yet - they're on the list before 1.0. ## What does an idle book cost? Nothing. Frames are drawn only when something changes, never on a timer, and destroy() stops everything and puts your DOM back the way it was. ## Is it ready for production? It's pre-1.0. The rendering is pixel-matched to the original, but the version stays at 0.x until the backlog of issues from the original projects is closed. Everything is verified in Chromium so far; Firefox and WebKit runs are still to come. [What has changed, release by release](/changelog/core/) ## What's the licence? MIT, same as the original. The fold geometry derives from StPageFlip, and the licence file credits it. [The licence file](https://github.com/benhonda/openpageflip/blob/main/LICENSE) # Migrating from StPageFlip > What changed between page-flip / react-pageflip and OpenPageFlip, as a table of every old option, method, event and prop and where it went. The names changed and there’s no compatibility layer for the old ones, so this is a small migration rather than a version bump. The tables below list every option, method, event and React prop the old packages had and where each one went. They’re typed against both APIs, so if a row is here, it’s current. Swap the dependency first. `page-flip` becomes the core package and `react-pageflip` becomes the React one (which needs the core package beside it, and React 19): * npm ```sh npm i @openpageflip/core ``` * pnpm ```sh pnpm add @openpageflip/core ``` * yarn ```sh yarn add @openpageflip/core ``` - npm ```sh npm i @openpageflip/core @openpageflip/react ``` - pnpm ```sh pnpm add @openpageflip/core @openpageflip/react ``` - yarn ```sh yarn add @openpageflip/core @openpageflip/react ``` Then the shape of things, which the tables don’t quite say on their own: * `new PageFlip(el, opts)` followed by `loadFromHTML(pages)` is one call now, `createBook(el, opts)`. The container’s children are the pages, and the stylesheet is a separate import. The [quick start](/start/core/) is the full version. * The animated turns return a promise that resolves when the page lands, and the getters became plain properties. Everything the old class exposed for its own internals is gone. * Event names are the same. The handler gets a typed event with the fields named (`e.page`, `e.orientation`, `e.state`) instead of `e.data`, and `on` hands back the unsubscribe function. * In React, the ref is the book itself, so `ref.current.pageFlip().flipNext()` is just `ref.current.flipNext()`. Pages don’t need refs any more. ## Options | page-flip | OpenPageFlip | Notes | | --------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `width` | [`width`](/api/openpageflip/core/type-aliases/BookOptions/#width) | | | `height` | [`height`](/api/openpageflip/core/type-aliases/BookOptions/#height) | | | `size` | [`size`](/api/openpageflip/core/type-aliases/BookOptions/#size) | | | `minWidth` | [`minWidth`](/api/openpageflip/core/type-aliases/BookOptions/#minwidth) | | | `maxWidth` | [`maxWidth`](/api/openpageflip/core/type-aliases/BookOptions/#maxwidth) | | | `minHeight` | *removed* | Height follows width by the width:height ratio, so the width bounds are enough. | | `maxHeight` | *removed* | Same as minHeight. | | `startPage` | [`startPage`](/api/openpageflip/core/type-aliases/BookOptions/#startpage) | | | `flippingTime` | [`flipDuration`](/api/openpageflip/core/type-aliases/BookOptions/#flipduration) | | | `drawShadow` | [`shadows`](/api/openpageflip/core/type-aliases/BookOptions/#shadows) | | | `maxShadowOpacity` | [`shadowOpacity`](/api/openpageflip/core/type-aliases/BookOptions/#shadowopacity) | | | `showCover` | [`cover`](/api/openpageflip/core/type-aliases/BookOptions/#cover) | | | `usePortrait` | [`layout`](/api/openpageflip/core/type-aliases/BookOptions/#layout) | usePortrait: false is layout: "spread". The default "auto" picks by container width, and "single" is new. | | `autoSize` | [`autoSize`](/api/openpageflip/core/type-aliases/BookOptions/#autosize) | | | `startZIndex` | *removed* | Pages are stacked inside the container, so the book no longer needs a z-index base. | | `mobileScrollSupport` | *removed* | The book sets touch-action on itself, so the page scrolls and the book flips without a flag. | | `clickEventForward` | [`ignoreDragOn`](/api/openpageflip/core/type-aliases/BookOptions/#ignoredragon) | Clicks on links, buttons and form fields always reach them. ignoreDragOn is the selector that decides which elements never start a flip. | | `useMouseEvents` | [`drag`](/api/openpageflip/core/type-aliases/BookOptions/#drag) | Split three ways: drag, swipe and click each have their own option. | | `swipeDistance` | [`swipeDistance`](/api/openpageflip/core/type-aliases/BookOptions/#swipedistance) | | | `showPageCorners` | [`hoverCorners`](/api/openpageflip/core/type-aliases/BookOptions/#hovercorners) | | | `disableFlipByClick` | [`click`](/api/openpageflip/core/type-aliases/BookOptions/#click) | disableFlipByClick: true is click: "corners". "off" turns clicks off entirely. | ## Methods | PageFlip | OpenPageFlip | Notes | | ----------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | `on()` | [`book.on()`](/api/openpageflip/core/type-aliases/Book/#on) | Returns the unsubscribe function, and takes an AbortSignal in its options. | | `off()` | [`book.off()`](/api/openpageflip/core/type-aliases/Book/#off) | Takes the listener as well as the event name; the old off() dropped every listener of that event. | | `destroy()` | [`book.destroy()`](/api/openpageflip/core/type-aliases/Book/#destroy) | | | `update()` | [`book.update()`](/api/openpageflip/core/type-aliases/Book/#update) | Resizes are watched for you; call this after other layout changes. | | `loadFromHTML()` | *removed* | The container's children are the pages when createBook runs, or pass the pages option. | | `updateFromHtml()` | [`book.setPages()`](/api/openpageflip/core/type-aliases/Book/#setpages) | | | `loadFromImages()` | *removed* | There is no image mode. Put an img element on each page and it renders like any other content. | | `updateFromImages()` | *removed* | Same as loadFromImages; use setPages with img pages. | | `clear()` | *removed* | destroy() restores the DOM; a new book starts from the pages you give it. | | `turnToPrevPage()` | [`book.turnPrev()`](/api/openpageflip/core/type-aliases/Book/#turnprev) | | | `turnToNextPage()` | [`book.turnNext()`](/api/openpageflip/core/type-aliases/Book/#turnnext) | | | `turnToPage()` | [`book.turnTo()`](/api/openpageflip/core/type-aliases/Book/#turnto) | | | `flipNext()` | [`book.flipNext()`](/api/openpageflip/core/type-aliases/Book/#flipnext) | Resolves when the turn lands, with false when there was nothing to turn to. | | `flipPrev()` | [`book.flipPrev()`](/api/openpageflip/core/type-aliases/Book/#flipprev) | Same promise as flipNext. | | `flip()` | [`book.flipTo()`](/api/openpageflip/core/type-aliases/Book/#flipto) | Same promise as flipNext. | | `getPageCount()` | [`book.pageCount`](/api/openpageflip/core/type-aliases/Book/#pagecount) | | | `getCurrentPageIndex()` | [`book.page`](/api/openpageflip/core/type-aliases/Book/#page) | | | `getOrientation()` | [`book.orientation`](/api/openpageflip/core/type-aliases/Book/#orientation) | | | `getState()` | [`book.state`](/api/openpageflip/core/type-aliases/Book/#state) | | | `getBoundsRect()` | [`book.rect`](/api/openpageflip/core/type-aliases/Book/#rect) | | | `getSettings()` | *removed* | Keep your own options object; the book does not hand it back. | | `getPage()` | *removed* | Internal in the old library. The page elements are the ones you passed in. | | `getRender()` | *removed* | Internal in the old library. | | `getFlipController()` | *removed* | Internal in the old library. | | `getUI()` | *removed* | Internal in the old library. | | `getPageCollection()` | *removed* | Internal in the old library. | | `updateState()` | *removed* | Internal in the old library; state is read-only from outside. | | `updatePageIndex()` | *removed* | Internal in the old library; use turnTo or flipTo. | | `updateOrientation()` | *removed* | Internal in the old library; the layout option decides orientation. | | `startUserTouch()` | *removed* | Internal in the old library; pointer input is handled by the book. | | `userMove()` | *removed* | Same as startUserTouch. | | `userStop()` | *removed* | Same as startUserTouch. | ## Events | page-flip | OpenPageFlip | Notes | | ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | `init` | [`init`](/api/openpageflip/core/type-aliases/BookEvents/#init) | e.data.page and e.data.mode are now e.page and e.orientation. | | `update` | [`update`](/api/openpageflip/core/type-aliases/BookEvents/#update) | Same shape as init. | | `flip` | [`flip`](/api/openpageflip/core/type-aliases/BookEvents/#flip) | e.data is now e.page. | | `changeState` | [`changeState`](/api/openpageflip/core/type-aliases/BookEvents/#changestate) | e.data is now e.state. | | `changeOrientation` | [`changeOrientation`](/api/openpageflip/core/type-aliases/BookEvents/#changeorientation) | e.data is now e.orientation. | ## React props | HTMLFlipBook | OpenPageFlip | Notes | | ---------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- | | `onInit` | `onInit` | Handlers get the core event, see the events table. | | `onUpdate` | `onUpdate` | | | `onFlip` | `onFlip` | | | `onChangeState` | `onChangeState` | | | `onChangeOrientation` | `onChangeOrientation` | | | `className` | `className` | | | `style` | `style` | | | `children` | `children` | Children are the pages, as before, but they no longer need a ref or forwardRef. Wrap one in Page to make it hard. | | `ref` | `ref` | The ref is the Book itself, so ref.current.flipNext() replaces ref.current.pageFlip().flipNext(). | | `renderOnlyPageLengthChange` | *removed* | Pages added or removed by React are picked up after every render, and a changed option rebuilds the book on its own. | # React > Install the React package beside the core one and render a FlipBook. Its children are the pages. The React package needs React 19, and the core package installed next to it. * npm ```sh npm i @openpageflip/core @openpageflip/react ``` * pnpm ```sh pnpm add @openpageflip/core @openpageflip/react ``` * yarn ```sh yarn add @openpageflip/core @openpageflip/react ``` ## A book is a component [Section titled “A book is a component”](#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: Quickstart.tsx ```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(null); return ( <>

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

); } ``` ## 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. */} setPage(e.page)} > {chapters.map((title, i) => { const isCover = i === 0 || i === chapters.length - 1; return (

{title}

 ); })}

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 }); } ``` # openpageflip ## Modules [Section titled “Modules”](#modules) * [@openpageflip/core](/api/openpageflip/core/) * [@openpageflip/react](/api/openpageflip/react/) # @openpageflip/core Framework-agnostic page-turn engine: `createBook`, its options, events and types. ## Type Aliases [Section titled “Type Aliases”](#type-aliases) * [Book](/api/openpageflip/core/type-aliases/book/) * [BookEvents](/api/openpageflip/core/type-aliases/bookevents/) * [BookOptions](/api/openpageflip/core/type-aliases/bookoptions/) * [BookRect](/api/openpageflip/core/type-aliases/bookrect/) * [ClickMode](/api/openpageflip/core/type-aliases/clickmode/) * [Clock](/api/openpageflip/core/type-aliases/clock/) * [CreateBookOptions](/api/openpageflip/core/type-aliases/createbookoptions/) * [Emitter](/api/openpageflip/core/type-aliases/emitter/) * [FlipCorner](/api/openpageflip/core/type-aliases/flipcorner/) * [FlipDirection](/api/openpageflip/core/type-aliases/flipdirection/) * [FlipFrame](/api/openpageflip/core/type-aliases/flipframe/) * [FlipState](/api/openpageflip/core/type-aliases/flipstate/) * [Fold](/api/openpageflip/core/type-aliases/fold/) * [FoldInput](/api/openpageflip/core/type-aliases/foldinput/) * [FoldIntersections](/api/openpageflip/core/type-aliases/foldintersections/) * [Frame](/api/openpageflip/core/type-aliases/frame/) * [Layout](/api/openpageflip/core/type-aliases/layout/) * [LayoutOptions](/api/openpageflip/core/type-aliases/layoutoptions/) * [LayoutResult](/api/openpageflip/core/type-aliases/layoutresult/) * [Listener](/api/openpageflip/core/type-aliases/listener/) * [Orientation](/api/openpageflip/core/type-aliases/orientation/) * [PageDensity](/api/openpageflip/core/type-aliases/pagedensity/) * [Point](/api/openpageflip/core/type-aliases/point/) * [Rect](/api/openpageflip/core/type-aliases/rect/) * [RectPoints](/api/openpageflip/core/type-aliases/rectpoints/) * [ResolvedOptions](/api/openpageflip/core/type-aliases/resolvedoptions/) * [Segment](/api/openpageflip/core/type-aliases/segment/) * [ShadowData](/api/openpageflip/core/type-aliases/shadowdata/) * [SizeMode](/api/openpageflip/core/type-aliases/sizemode/) ## Variables [Section titled “Variables”](#variables) * [ClickMode](/api/openpageflip/core/variables/clickmode/) * [FlipCorner](/api/openpageflip/core/variables/flipcorner/) * [FlipDirection](/api/openpageflip/core/variables/flipdirection/) * [FlipState](/api/openpageflip/core/variables/flipstate/) * [Layout](/api/openpageflip/core/variables/layout/) * [Orientation](/api/openpageflip/core/variables/orientation/) * [PageDensity](/api/openpageflip/core/variables/pagedensity/) * [SizeMode](/api/openpageflip/core/variables/sizemode/) ## Functions [Section titled “Functions”](#functions) * [computeFold](/api/openpageflip/core/functions/computefold/) * [computeLayout](/api/openpageflip/core/functions/computelayout/) * [createBook](/api/openpageflip/core/functions/createbook/) # computeFold > **computeFold**(`input`): [`Fold`](/api/openpageflip/core/type-aliases/fold/) | `null` Defined in: [core/src/geometry/fold.ts:65](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L65) Returns `null` when the point is degenerate (the corner is at rest, or the fold line would coincide with a page edge). Callers keep the previous fold for that frame, as the original did. ## Parameters [Section titled “Parameters”](#parameters) ### input [Section titled “input”](#input) [`FoldInput`](/api/openpageflip/core/type-aliases/foldinput/) ## Returns [Section titled “Returns”](#returns) [`Fold`](/api/openpageflip/core/type-aliases/fold/) | `null` # computeLayout > **computeLayout**(`containerWidth`, `containerHeight`, `options`): [`LayoutResult`](/api/openpageflip/core/type-aliases/layoutresult/) Defined in: [core/src/layout.ts:24](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L24) Page size and orientation for a container. Same arithmetic as the original, so the book lands on the same pixels; `layout` only overrides the “is the container too narrow” decision. ## Parameters [Section titled “Parameters”](#parameters) ### containerWidth [Section titled “containerWidth”](#containerwidth) `number` ### containerHeight [Section titled “containerHeight”](#containerheight) `number` ### options [Section titled “options”](#options) [`LayoutOptions`](/api/openpageflip/core/type-aliases/layoutoptions/) ## Returns [Section titled “Returns”](#returns) [`LayoutResult`](/api/openpageflip/core/type-aliases/layoutresult/) # createBook > **createBook**(`container`, `userOptions`): [`Book`](/api/openpageflip/core/type-aliases/book/) Defined in: [core/src/book.ts:63](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L63) ## Parameters [Section titled “Parameters”](#parameters) ### container [Section titled “container”](#container) `HTMLElement` ### userOptions [Section titled “userOptions”](#useroptions) [`CreateBookOptions`](/api/openpageflip/core/type-aliases/createbookoptions/) ## Returns [Section titled “Returns”](#returns) [`Book`](/api/openpageflip/core/type-aliases/book/) # Book > **Book** = `object` Defined in: [core/src/book.ts:28](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L28) ## Properties [Section titled “Properties”](#properties) ### off [Section titled “off”](#off) > **off**: [`Emitter`](/api/openpageflip/core/type-aliases/emitter/)<[`BookEvents`](/api/openpageflip/core/type-aliases/bookevents/)>\[`"off"`] Defined in: [core/src/book.ts:37](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L37) *** ### on [Section titled “on”](#on) > **on**: [`Emitter`](/api/openpageflip/core/type-aliases/emitter/)<[`BookEvents`](/api/openpageflip/core/type-aliases/bookevents/)>\[`"on"`] Defined in: [core/src/book.ts:36](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L36) *** ### orientation [Section titled “orientation”](#orientation) > `readonly` **orientation**: [`Orientation`](/api/openpageflip/core/type-aliases/orientation/) Defined in: [core/src/book.ts:32](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L32) *** ### page [Section titled “page”](#page) > `readonly` **page**: `number` Defined in: [core/src/book.ts:30](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L30) First page of the open spread, zero-based. *** ### pageCount [Section titled “pageCount”](#pagecount) > `readonly` **pageCount**: `number` Defined in: [core/src/book.ts:31](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L31) *** ### rect [Section titled “rect”](#rect) > `readonly` **rect**: [`BookRect`](/api/openpageflip/core/type-aliases/bookrect/) Defined in: [core/src/book.ts:34](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L34) *** ### state [Section titled “state”](#state) > `readonly` **state**: [`FlipState`](/api/openpageflip/core/type-aliases/flipstate/) Defined in: [core/src/book.ts:33](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L33) ## Methods [Section titled “Methods”](#methods) ### destroy() [Section titled “destroy()”](#destroy) > **destroy**(): `void` Defined in: [core/src/book.ts:55](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L55) Stop everything, drop listeners and observers, and restore the DOM. #### Returns [Section titled “Returns”](#returns) `void` *** ### flipNext() [Section titled “flipNext()”](#flipnext) > **flipNext**(`corner?`): `Promise`<`boolean`> Defined in: [core/src/book.ts:40](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L40) Animated turns. Resolve with `false` when there is nothing to turn to. #### Parameters [Section titled “Parameters”](#parameters) ##### corner? [Section titled “corner?”](#corner) [`FlipCorner`](/api/openpageflip/core/type-aliases/flipcorner/) #### Returns [Section titled “Returns”](#returns-1) `Promise`<`boolean`> *** ### flipPrev() [Section titled “flipPrev()”](#flipprev) > **flipPrev**(`corner?`): `Promise`<`boolean`> Defined in: [core/src/book.ts:41](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L41) #### Parameters [Section titled “Parameters”](#parameters-1) ##### corner? [Section titled “corner?”](#corner-1) [`FlipCorner`](/api/openpageflip/core/type-aliases/flipcorner/) #### Returns [Section titled “Returns”](#returns-2) `Promise`<`boolean`> *** ### flipTo() [Section titled “flipTo()”](#flipto) > **flipTo**(`page`, `corner?`): `Promise`<`boolean`> Defined in: [core/src/book.ts:42](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L42) #### Parameters [Section titled “Parameters”](#parameters-2) ##### page [Section titled “page”](#page-1) `number` ##### corner? [Section titled “corner?”](#corner-2) [`FlipCorner`](/api/openpageflip/core/type-aliases/flipcorner/) #### Returns [Section titled “Returns”](#returns-3) `Promise`<`boolean`> *** ### redraw() [Section titled “redraw()”](#redraw) > **redraw**(): `void` Defined in: [core/src/book.ts:53](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L53) Redraw the current frame without measuring, after something else rewrote page attributes. Cheap. #### Returns [Section titled “Returns”](#returns-4) `void` *** ### setPages() [Section titled “setPages()”](#setpages) > **setPages**(`pages`): `void` Defined in: [core/src/book.ts:49](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L49) Replace the page elements. Keeps the current page where possible. #### Parameters [Section titled “Parameters”](#parameters-3) ##### pages [Section titled “pages”](#pages) `Iterable`<`HTMLElement`> #### Returns [Section titled “Returns”](#returns-5) `void` *** ### turnNext() [Section titled “turnNext()”](#turnnext) > **turnNext**(): `void` Defined in: [core/src/book.ts:45](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L45) #### Returns [Section titled “Returns”](#returns-6) `void` *** ### turnPrev() [Section titled “turnPrev()”](#turnprev) > **turnPrev**(): `void` Defined in: [core/src/book.ts:46](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L46) #### Returns [Section titled “Returns”](#returns-7) `void` *** ### turnTo() [Section titled “turnTo()”](#turnto) > **turnTo**(`page`): `void` Defined in: [core/src/book.ts:44](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L44) Instant turns. #### Parameters [Section titled “Parameters”](#parameters-4) ##### page [Section titled “page”](#page-2) `number` #### Returns [Section titled “Returns”](#returns-8) `void` *** ### update() [Section titled “update()”](#update) > **update**(): `void` Defined in: [core/src/book.ts:51](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L51) Re-measure the container and redraw. Resizes are handled automatically; call this after other layout changes. #### Returns [Section titled “Returns”](#returns-9) `void` # BookEvents > **BookEvents** = `object` Defined in: [core/src/book.ts:17](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L17) ## Properties [Section titled “Properties”](#properties) ### changeOrientation [Section titled “changeOrientation”](#changeorientation) > **changeOrientation**: `object` Defined in: [core/src/book.ts:25](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L25) #### orientation [Section titled “orientation”](#orientation) > `readonly` **orientation**: [`Orientation`](/api/openpageflip/core/type-aliases/orientation/) *** ### changeState [Section titled “changeState”](#changestate) > **changeState**: `object` Defined in: [core/src/book.ts:24](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L24) #### state [Section titled “state”](#state) > `readonly` **state**: [`FlipState`](/api/openpageflip/core/type-aliases/flipstate/) *** ### flip [Section titled “flip”](#flip) > **flip**: `object` Defined in: [core/src/book.ts:23](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L23) A different spread is showing. `page` is the first page of it. #### page [Section titled “page”](#page) > `readonly` **page**: `number` *** ### init [Section titled “init”](#init) > **init**: `object` Defined in: [core/src/book.ts:19](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L19) The book is laid out and showing `startPage`. Fires once, after `createBook` returns. #### orientation [Section titled “orientation”](#orientation-1) > `readonly` **orientation**: [`Orientation`](/api/openpageflip/core/type-aliases/orientation/) #### page [Section titled “page”](#page-1) > `readonly` **page**: `number` *** ### update [Section titled “update”](#update) > **update**: `object` Defined in: [core/src/book.ts:21](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L21) Pages were replaced with `setPages`. #### orientation [Section titled “orientation”](#orientation-2) > `readonly` **orientation**: [`Orientation`](/api/openpageflip/core/type-aliases/orientation/) #### page [Section titled “page”](#page-2) > `readonly` **page**: `number` # BookOptions > **BookOptions** = `object` Defined in: [core/src/options.ts:52](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L52) ## Properties [Section titled “Properties”](#properties) ### autoSize? [Section titled “autoSize?”](#autosize) > `readonly` `optional` **autoSize?**: `boolean` Defined in: [core/src/options.ts:78](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L78) Size the container to the book (aspect ratio and max width). #### Default [Section titled “Default”](#default) ```ts true ``` *** ### click? [Section titled “click?”](#click) > `readonly` `optional` **click?**: [`ClickMode`](/api/openpageflip/core/type-aliases/clickmode/) Defined in: [core/src/options.ts:80](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L80) #### Default [Section titled “Default”](#default-1) ```ts "anywhere" ``` *** ### cover? [Section titled “cover?”](#cover) > `readonly` `optional` **cover?**: `boolean` Defined in: [core/src/options.ts:66](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L66) Show the first and last pages alone, as hard covers. #### Default [Section titled “Default”](#default-2) ```ts false ``` *** ### drag? [Section titled “drag?”](#drag) > `readonly` `optional` **drag?**: `boolean` Defined in: [core/src/options.ts:82](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L82) Let the pointer drag a corner. #### Default [Section titled “Default”](#default-3) ```ts true ``` *** ### easing? [Section titled “easing?”](#easing) > `readonly` `optional` **easing?**: (`t`) => `number` Defined in: [core/src/options.ts:72](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L72) Easing for the corner’s path, `t` in 0..1. #### Parameters [Section titled “Parameters”](#parameters) ##### t [Section titled “t”](#t) `number` #### Returns [Section titled “Returns”](#returns) `number` #### Default [Section titled “Default”](#default-4) ```ts linear ``` *** ### flipDuration? [Section titled “flipDuration?”](#flipduration) > `readonly` `optional` **flipDuration?**: `number` Defined in: [core/src/options.ts:70](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L70) Duration of a full flip in milliseconds. Shorter flips take proportionally less. #### Default [Section titled “Default”](#default-5) ```ts 1000 ``` *** ### height [Section titled “height”](#height) > `readonly` **height**: `number` Defined in: [core/src/options.ts:56](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L56) Base page height in CSS pixels. *** ### hoverCorners? [Section titled “hoverCorners?”](#hovercorners) > `readonly` `optional` **hoverCorners?**: `boolean` Defined in: [core/src/options.ts:88](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L88) Lift a corner when the mouse hovers over it. #### Default [Section titled “Default”](#default-6) ```ts true ``` *** ### ignoreDragOn? [Section titled “ignoreDragOn?”](#ignoredragon) > `readonly` `optional` **ignoreDragOn?**: `string` | `false` Defined in: [core/src/options.ts:94](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L94) Pointer events starting on an element matching this selector never start a flip. `false` turns this off. #### Default [Section titled “Default”](#default-7) ```ts "a, button, input, textarea, select, [data-opf-no-flip]" ``` *** ### layout? [Section titled “layout?”](#layout) > `readonly` `optional` **layout?**: [`Layout`](/api/openpageflip/core/type-aliases/layout/) Defined in: [core/src/options.ts:64](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L64) #### Default [Section titled “Default”](#default-8) ```ts "auto" ``` *** ### maxWidth? [Section titled “maxWidth?”](#maxwidth) > `readonly` `optional` **maxWidth?**: `number` Defined in: [core/src/options.ts:62](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L62) Widest single page in `stretch` mode. #### Default [Section titled “Default”](#default-9) ```ts 2000 ``` *** ### minWidth? [Section titled “minWidth?”](#minwidth) > `readonly` `optional` **minWidth?**: `number` Defined in: [core/src/options.ts:60](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L60) Narrowest single page in `stretch` mode; below twice this the book goes portrait. #### Default [Section titled “Default”](#default-10) ```ts 100 ``` *** ### pages? [Section titled “pages?”](#pages) > `readonly` `optional` **pages?**: `Iterable`<`HTMLElement`> Defined in: [core/src/options.ts:96](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L96) Page elements. #### Default [Section titled “Default”](#default-11) ```ts the container's children ``` *** ### shadowOpacity? [Section titled “shadowOpacity?”](#shadowopacity) > `readonly` `optional` **shadowOpacity?**: `number` Defined in: [core/src/options.ts:76](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L76) 0 hides shadows, 1 is full strength. #### Default [Section titled “Default”](#default-12) ```ts 1 ``` *** ### shadows? [Section titled “shadows?”](#shadows) > `readonly` `optional` **shadows?**: `boolean` Defined in: [core/src/options.ts:74](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L74) #### Default [Section titled “Default”](#default-13) ```ts true ``` *** ### size? [Section titled “size?”](#size) > `readonly` `optional` **size?**: [`SizeMode`](/api/openpageflip/core/type-aliases/sizemode/) Defined in: [core/src/options.ts:58](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L58) #### Default [Section titled “Default”](#default-14) ```ts "fixed" ``` *** ### startPage? [Section titled “startPage?”](#startpage) > `readonly` `optional` **startPage?**: `number` Defined in: [core/src/options.ts:68](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L68) Zero-based page to open on. #### Default [Section titled “Default”](#default-15) ```ts 0 ``` *** ### swipe? [Section titled “swipe?”](#swipe) > `readonly` `optional` **swipe?**: `boolean` Defined in: [core/src/options.ts:84](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L84) Turn the page on a quick horizontal swipe. #### Default [Section titled “Default”](#default-16) ```ts true ``` *** ### swipeDistance? [Section titled “swipeDistance?”](#swipedistance) > `readonly` `optional` **swipeDistance?**: `number` Defined in: [core/src/options.ts:86](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L86) Minimum swipe travel in CSS pixels. #### Default [Section titled “Default”](#default-17) ```ts 30 ``` *** ### width [Section titled “width”](#width) > `readonly` **width**: `number` Defined in: [core/src/options.ts:54](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L54) Base page width in CSS pixels. With `size: "stretch"` only the `width:height` ratio matters. # BookRect > **BookRect** = `object` Defined in: [core/src/layout.ts:4](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L4) Where the book sits inside its container, in container CSS pixels. ## Properties [Section titled “Properties”](#properties) ### height [Section titled “height”](#height) > `readonly` **height**: `number` Defined in: [core/src/layout.ts:9](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L9) *** ### left [Section titled “left”](#left) > `readonly` **left**: `number` Defined in: [core/src/layout.ts:5](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L5) *** ### pageWidth [Section titled “pageWidth”](#pagewidth) > `readonly` **pageWidth**: `number` Defined in: [core/src/layout.ts:10](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L10) *** ### top [Section titled “top”](#top) > `readonly` **top**: `number` Defined in: [core/src/layout.ts:6](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L6) *** ### width [Section titled “width”](#width) > `readonly` **width**: `number` Defined in: [core/src/layout.ts:8](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L8) Always two pages wide, even in portrait, where only the right half is visible. # ClickMode > **ClickMode** = *typeof* [`ClickMode`](/api/openpageflip/core/variables/clickmode/)\[keyof *typeof* [`ClickMode`](/api/openpageflip/core/variables/clickmode/)] Defined in: [core/src/options.ts:49](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L49) When a click or tap turns the page. # Clock > **Clock** = `object` Defined in: [core/src/animation.ts:2](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/animation.ts#L2) Time and frame sources, injectable so tests can step animations by hand. ## Methods [Section titled “Methods”](#methods) ### cancelFrame() [Section titled “cancelFrame()”](#cancelframe) > **cancelFrame**(`handle`): `void` Defined in: [core/src/animation.ts:5](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/animation.ts#L5) #### Parameters [Section titled “Parameters”](#parameters) ##### handle [Section titled “handle”](#handle) `number` #### Returns [Section titled “Returns”](#returns) `void` *** ### now() [Section titled “now()”](#now) > **now**(): `number` Defined in: [core/src/animation.ts:3](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/animation.ts#L3) #### Returns [Section titled “Returns”](#returns-1) `number` *** ### requestFrame() [Section titled “requestFrame()”](#requestframe) > **requestFrame**(`callback`): `number` Defined in: [core/src/animation.ts:4](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/animation.ts#L4) #### Parameters [Section titled “Parameters”](#parameters-1) ##### callback [Section titled “callback”](#callback) (`time`) => `void` #### Returns [Section titled “Returns”](#returns-2) `number` # CreateBookOptions > **CreateBookOptions** = [`BookOptions`](/api/openpageflip/core/type-aliases/bookoptions/) & `object` Defined in: [core/src/book.ts:58](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/book.ts#L58) ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### clock? [Section titled “clock?”](#clock) > `readonly` `optional` **clock?**: [`Clock`](/api/openpageflip/core/type-aliases/clock/) Time and frame source, replaceable in tests. # Emitter > **Emitter**<`Events`> = `object` Defined in: [core/src/events.ts:3](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/events.ts#L3) ## Type Parameters [Section titled “Type Parameters”](#type-parameters) ### Events [Section titled “Events”](#events) `Events` *extends* `Record`<`string`, `unknown`> ## Methods [Section titled “Methods”](#methods) ### clear() [Section titled “clear()”](#clear) > **clear**(): `void` Defined in: [core/src/events.ts:11](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/events.ts#L11) #### Returns [Section titled “Returns”](#returns) `void` *** ### emit() [Section titled “emit()”](#emit) > **emit**<`K`>(`name`, `event`): `void` Defined in: [core/src/events.ts:10](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/events.ts#L10) #### Type Parameters [Section titled “Type Parameters”](#type-parameters-1) ##### K [Section titled “K”](#k) `K` *extends* `string` | `number` | `symbol` #### Parameters [Section titled “Parameters”](#parameters) ##### name [Section titled “name”](#name) `K` ##### event [Section titled “event”](#event) `Events`\[`K`] #### Returns [Section titled “Returns”](#returns-1) `void` *** ### off() [Section titled “off()”](#off) > **off**<`K`>(`name`, `listener`): `void` Defined in: [core/src/events.ts:9](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/events.ts#L9) #### Type Parameters [Section titled “Type Parameters”](#type-parameters-2) ##### K [Section titled “K”](#k-1) `K` *extends* `string` | `number` | `symbol` #### Parameters [Section titled “Parameters”](#parameters-1) ##### name [Section titled “name”](#name-1) `K` ##### listener [Section titled “listener”](#listener) [`Listener`](/api/openpageflip/core/type-aliases/listener/)<`Events`\[`K`]> #### Returns [Section titled “Returns”](#returns-2) `void` *** ### on() [Section titled “on()”](#on) > **on**<`K`>(`name`, `listener`, `options?`): () => `void` Defined in: [core/src/events.ts:4](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/events.ts#L4) #### Type Parameters [Section titled “Type Parameters”](#type-parameters-3) ##### K [Section titled “K”](#k-2) `K` *extends* `string` | `number` | `symbol` #### Parameters [Section titled “Parameters”](#parameters-2) ##### name [Section titled “name”](#name-2) `K` ##### listener [Section titled “listener”](#listener-1) [`Listener`](/api/openpageflip/core/type-aliases/listener/)<`Events`\[`K`]> ##### options? [Section titled “options?”](#options) ###### signal? [Section titled “signal?”](#signal) `AbortSignal` #### Returns [Section titled “Returns”](#returns-3) () => `void` # FlipCorner > **FlipCorner** = *typeof* [`FlipCorner`](/api/openpageflip/core/variables/flipcorner/)\[keyof *typeof* [`FlipCorner`](/api/openpageflip/core/variables/flipcorner/)] Defined in: [core/src/options.ts:11](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L11) Which corner a programmatic flip lifts. # FlipDirection > **FlipDirection** = *typeof* [`FlipDirection`](/api/openpageflip/core/variables/flipdirection/)\[keyof *typeof* [`FlipDirection`](/api/openpageflip/core/variables/flipdirection/)] Defined in: [core/src/options.ts:19](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L19) Which way a page is turning: `forward` reads on, `back` returns to the previous spread. # FlipFrame > **FlipFrame** = `object` Defined in: [core/src/controller.ts:40](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L40) ## Properties [Section titled “Properties”](#properties) ### bottom [Section titled “bottom”](#bottom) > `readonly` **bottom**: `number` Defined in: [core/src/controller.ts:44](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L44) *** ### corner [Section titled “corner”](#corner) > `readonly` **corner**: [`FlipCorner`](/api/openpageflip/core/type-aliases/flipcorner/) Defined in: [core/src/controller.ts:42](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L42) *** ### direction [Section titled “direction”](#direction) > `readonly` **direction**: [`FlipDirection`](/api/openpageflip/core/type-aliases/flipdirection/) Defined in: [core/src/controller.ts:41](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L41) *** ### flipping [Section titled “flipping”](#flipping) > `readonly` **flipping**: `number` Defined in: [core/src/controller.ts:43](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L43) *** ### fold [Section titled “fold”](#fold) > `readonly` **fold**: [`Fold`](/api/openpageflip/core/type-aliases/fold/) Defined in: [core/src/controller.ts:45](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L45) *** ### hardAngle [Section titled “hardAngle”](#hardangle) > `readonly` **hardAngle**: `number` Defined in: [core/src/controller.ts:48](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L48) Rotation about the spine for hard pages, in degrees. *** ### progress [Section titled “progress”](#progress) > `readonly` **progress**: `number` Defined in: [core/src/controller.ts:46](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L46) *** ### shadow [Section titled “shadow”](#shadow) > `readonly` **shadow**: [`ShadowData`](/api/openpageflip/core/type-aliases/shadowdata/) | `null` Defined in: [core/src/controller.ts:49](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L49) # FlipState > **FlipState** = *typeof* [`FlipState`](/api/openpageflip/core/variables/flipstate/)\[keyof *typeof* [`FlipState`](/api/openpageflip/core/variables/flipstate/)] Defined in: [core/src/options.ts:27](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L27) What the book is doing right now. # Fold > **Fold** = `object` Defined in: [core/src/geometry/fold.ts:40](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L40) ## Properties [Section titled “Properties”](#properties) ### activeCorner [Section titled “activeCorner”](#activecorner) > `readonly` **activeCorner**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/fold.ts:55](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L55) Where the flipping page’s own origin corner sits. *** ### angle [Section titled “angle”](#angle) > `readonly` **angle**: `number` Defined in: [core/src/geometry/fold.ts:42](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L42) Rotation of the flipping page in radians, signed by direction. *** ### bottomClip [Section titled “bottomClip”](#bottomclip) > `readonly` **bottomClip**: readonly [`Point`](/api/openpageflip/core/type-aliases/point/)\[] Defined in: [core/src/geometry/fold.ts:53](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L53) Part of the page underneath that the fold reveals. *** ### bottomPagePosition [Section titled “bottomPagePosition”](#bottompageposition) > `readonly` **bottomPagePosition**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/fold.ts:56](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L56) *** ### flippingClip [Section titled “flippingClip”](#flippingclip) > `readonly` **flippingClip**: readonly [`Point`](/api/openpageflip/core/type-aliases/point/)\[] Defined in: [core/src/geometry/fold.ts:51](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L51) Visible part of the flipping page, as a polygon in page coordinates. *** ### intersections [Section titled “intersections”](#intersections) > `readonly` **intersections**: [`FoldIntersections`](/api/openpageflip/core/type-aliases/foldintersections/) Defined in: [core/src/geometry/fold.ts:49](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L49) *** ### position [Section titled “position”](#position) > `readonly` **position**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/fold.ts:44](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L44) Where the dragged corner ended up after clamping to what paper can do. *** ### progress [Section titled “progress”](#progress) > `readonly` **progress**: `number` Defined in: [core/src/geometry/fold.ts:46](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L46) 0 at rest, 100 fully turned. *** ### rect [Section titled “rect”](#rect) > `readonly` **rect**: [`RectPoints`](/api/openpageflip/core/type-aliases/rectpoints/) Defined in: [core/src/geometry/fold.ts:48](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L48) Corners of the flipping page after rotation. *** ### shadow [Section titled “shadow”](#shadow) > `readonly` **shadow**: { `angle`: `number`; `start`: [`Point`](/api/openpageflip/core/type-aliases/point/); } | `null` Defined in: [core/src/geometry/fold.ts:58](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L58) Drop-shadow origin and rotation, or `null` when the fold crosses no usable edges. # FoldInput > **FoldInput** = `object` Defined in: [core/src/geometry/fold.ts:24](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L24) ## Properties [Section titled “Properties”](#properties) ### corner [Section titled “corner”](#corner) > `readonly` **corner**: [`FlipCorner`](/api/openpageflip/core/type-aliases/flipcorner/) Defined in: [core/src/geometry/fold.ts:26](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L26) *** ### direction [Section titled “direction”](#direction) > `readonly` **direction**: [`FlipDirection`](/api/openpageflip/core/type-aliases/flipdirection/) Defined in: [core/src/geometry/fold.ts:25](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L25) *** ### pageHeight [Section titled “pageHeight”](#pageheight) > `readonly` **pageHeight**: `number` Defined in: [core/src/geometry/fold.ts:28](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L28) *** ### pageWidth [Section titled “pageWidth”](#pagewidth) > `readonly` **pageWidth**: `number` Defined in: [core/src/geometry/fold.ts:27](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L27) *** ### point [Section titled “point”](#point) > `readonly` **point**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/fold.ts:30](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L30) Drag point in active-page coordinates: origin at the page’s top-left, x grows toward the outer edge. # FoldIntersections > **FoldIntersections** = `object` Defined in: [core/src/geometry/fold.ts:34](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L34) Where the fold line meets the page edges. A `null` edge is not crossed. ## Properties [Section titled “Properties”](#properties) ### bottom [Section titled “bottom”](#bottom) > `readonly` **bottom**: [`Point`](/api/openpageflip/core/type-aliases/point/) | `null` Defined in: [core/src/geometry/fold.ts:37](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L37) *** ### side [Section titled “side”](#side) > `readonly` **side**: [`Point`](/api/openpageflip/core/type-aliases/point/) | `null` Defined in: [core/src/geometry/fold.ts:36](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L36) *** ### top [Section titled “top”](#top) > `readonly` **top**: [`Point`](/api/openpageflip/core/type-aliases/point/) | `null` Defined in: [core/src/geometry/fold.ts:35](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/fold.ts#L35) # Frame > **Frame** = `object` Defined in: [core/src/controller.ts:53](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L53) Everything a renderer needs to draw one moment of the book. ## Properties [Section titled “Properties”](#properties) ### flip [Section titled “flip”](#flip) > `readonly` **flip**: [`FlipFrame`](/api/openpageflip/core/type-aliases/flipframe/) | `null` Defined in: [core/src/controller.ts:58](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L58) *** ### left [Section titled “left”](#left) > `readonly` **left**: `number` | `null` Defined in: [core/src/controller.ts:56](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L56) *** ### orientation [Section titled “orientation”](#orientation) > `readonly` **orientation**: [`Orientation`](/api/openpageflip/core/type-aliases/orientation/) Defined in: [core/src/controller.ts:55](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L55) *** ### rect [Section titled “rect”](#rect) > `readonly` **rect**: [`BookRect`](/api/openpageflip/core/type-aliases/bookrect/) Defined in: [core/src/controller.ts:54](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L54) *** ### right [Section titled “right”](#right) > `readonly` **right**: `number` | `null` Defined in: [core/src/controller.ts:57](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L57) # Layout > **Layout** = *typeof* [`Layout`](/api/openpageflip/core/variables/layout/)\[keyof *typeof* [`Layout`](/api/openpageflip/core/variables/layout/)] Defined in: [core/src/options.ts:7](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L7) How many pages are visible at once. `auto` picks by container width. # LayoutOptions > **LayoutOptions** = `Pick`<[`ResolvedOptions`](/api/openpageflip/core/type-aliases/resolvedoptions/), `"size"` | `"width"` | `"height"` | `"minWidth"` | `"maxWidth"` | `"layout"`> Defined in: [core/src/layout.ts:15](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L15) # LayoutResult > **LayoutResult** = `object` Defined in: [core/src/layout.ts:13](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L13) ## Properties [Section titled “Properties”](#properties) ### orientation [Section titled “orientation”](#orientation) > `readonly` **orientation**: [`Orientation`](/api/openpageflip/core/type-aliases/orientation/) Defined in: [core/src/layout.ts:13](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L13) *** ### rect [Section titled “rect”](#rect) > `readonly` **rect**: [`BookRect`](/api/openpageflip/core/type-aliases/bookrect/) Defined in: [core/src/layout.ts:13](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/layout.ts#L13) # Listener > **Listener**<`T`> = (`event`) => `void` Defined in: [core/src/events.ts:1](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/events.ts#L1) ## Type Parameters [Section titled “Type Parameters”](#type-parameters) ### T [Section titled “T”](#t) `T` ## Parameters [Section titled “Parameters”](#parameters) ### event [Section titled “event”](#event) `T` ## Returns [Section titled “Returns”](#returns) `void` # Orientation > **Orientation** = *typeof* [`Orientation`](/api/openpageflip/core/variables/orientation/)\[keyof *typeof* [`Orientation`](/api/openpageflip/core/variables/orientation/)] Defined in: [core/src/options.ts:23](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L23) What the book is showing: one page (`portrait`) or a two-page spread (`landscape`). # PageDensity > **PageDensity** = *typeof* [`PageDensity`](/api/openpageflip/core/variables/pagedensity/)\[keyof *typeof* [`PageDensity`](/api/openpageflip/core/variables/pagedensity/)] Defined in: [core/src/options.ts:15](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L15) `hard` pages rotate as a rigid sheet (covers); `soft` pages bend along the fold. # Point > **Point** = `object` Defined in: [core/src/geometry/point.ts:9](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L9) Plane geometry primitives for the fold calculation. Pure functions, no DOM. The maths derives from StPageFlip’s `Helper` (MIT, Oleg Litovski). Where the original’s behaviour is quirky, the quirk is kept and commented, because the renderer’s look depends on it and the parity tests in `test/fold.parity.test.ts` hold this module to the original. ## Properties [Section titled “Properties”](#properties) ### x [Section titled “x”](#x) > `readonly` **x**: `number` Defined in: [core/src/geometry/point.ts:9](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L9) *** ### y [Section titled “y”](#y) > `readonly` **y**: `number` Defined in: [core/src/geometry/point.ts:9](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L9) # Rect > **Rect** = `object` Defined in: [core/src/geometry/point.ts:14](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L14) ## Properties [Section titled “Properties”](#properties) ### height [Section titled “height”](#height) > `readonly` **height**: `number` Defined in: [core/src/geometry/point.ts:18](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L18) *** ### left [Section titled “left”](#left) > `readonly` **left**: `number` Defined in: [core/src/geometry/point.ts:15](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L15) *** ### top [Section titled “top”](#top) > `readonly` **top**: `number` Defined in: [core/src/geometry/point.ts:16](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L16) *** ### width [Section titled “width”](#width) > `readonly` **width**: `number` Defined in: [core/src/geometry/point.ts:17](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L17) # RectPoints > **RectPoints** = `object` Defined in: [core/src/geometry/point.ts:22](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L22) The four corners of a rectangle after rotation, so no longer axis-aligned. ## Properties [Section titled “Properties”](#properties) ### bottomLeft [Section titled “bottomLeft”](#bottomleft) > `readonly` **bottomLeft**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/point.ts:25](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L25) *** ### bottomRight [Section titled “bottomRight”](#bottomright) > `readonly` **bottomRight**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/point.ts:26](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L26) *** ### topLeft [Section titled “topLeft”](#topleft) > `readonly` **topLeft**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/point.ts:23](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L23) *** ### topRight [Section titled “topRight”](#topright) > `readonly` **topRight**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/geometry/point.ts:24](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L24) # ResolvedOptions > **ResolvedOptions** = `Required`<`Omit`<[`BookOptions`](/api/openpageflip/core/type-aliases/bookoptions/), `"pages"`>> Defined in: [core/src/options.ts:99](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L99) # Segment > **Segment** = readonly \[[`Point`](/api/openpageflip/core/type-aliases/point/), [`Point`](/api/openpageflip/core/type-aliases/point/)] Defined in: [core/src/geometry/point.ts:12](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/geometry/point.ts#L12) A line through two points. Used as an infinite line, not a bounded segment. # ShadowData > **ShadowData** = `object` Defined in: [core/src/controller.ts:30](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L30) ## Properties [Section titled “Properties”](#properties) ### angle [Section titled “angle”](#angle) > `readonly` **angle**: `number` Defined in: [core/src/controller.ts:32](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L32) *** ### direction [Section titled “direction”](#direction) > `readonly` **direction**: [`FlipDirection`](/api/openpageflip/core/type-aliases/flipdirection/) Defined in: [core/src/controller.ts:35](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L35) *** ### opacity [Section titled “opacity”](#opacity) > `readonly` **opacity**: `number` Defined in: [core/src/controller.ts:34](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L34) *** ### pos [Section titled “pos”](#pos) > `readonly` **pos**: [`Point`](/api/openpageflip/core/type-aliases/point/) Defined in: [core/src/controller.ts:31](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L31) *** ### progress [Section titled “progress”](#progress) > `readonly` **progress**: `number` Defined in: [core/src/controller.ts:37](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L37) 0..200: the original doubled flip progress for its hard-page shadow curve. *** ### width [Section titled “width”](#width) > `readonly` **width**: `number` Defined in: [core/src/controller.ts:33](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/controller.ts#L33) # SizeMode > **SizeMode** = *typeof* [`SizeMode`](/api/openpageflip/core/variables/sizemode/)\[keyof *typeof* [`SizeMode`](/api/openpageflip/core/variables/sizemode/)] Defined in: [core/src/options.ts:40](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L40) How the book sizes itself. # ClickMode > `const` **ClickMode**: `object` Defined in: [core/src/options.ts:49](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L49) When a click or tap turns the page. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### anywhere [Section titled “anywhere”](#anywhere) > `readonly` **anywhere**: `"anywhere"` = `"anywhere"` ### corners [Section titled “corners”](#corners) > `readonly` **corners**: `"corners"` = `"corners"` ### off [Section titled “off”](#off) > `readonly` **off**: `"off"` = `"off"` # FlipCorner > `const` **FlipCorner**: `object` Defined in: [core/src/options.ts:11](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L11) Which corner a programmatic flip lifts. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### bottom [Section titled “bottom”](#bottom) > `readonly` **bottom**: `"bottom"` = `"bottom"` ### top [Section titled “top”](#top) > `readonly` **top**: `"top"` = `"top"` # FlipDirection > `const` **FlipDirection**: `object` Defined in: [core/src/options.ts:19](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L19) Which way a page is turning: `forward` reads on, `back` returns to the previous spread. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### back [Section titled “back”](#back) > `readonly` **back**: `"back"` = `"back"` ### forward [Section titled “forward”](#forward) > `readonly` **forward**: `"forward"` = `"forward"` # FlipState > `const` **FlipState**: `object` Defined in: [core/src/options.ts:27](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L27) What the book is doing right now. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### flipping [Section titled “flipping”](#flipping) > `readonly` **flipping**: `"flipping"` = `"flipping"` A flip animation is running. ### foldCorner [Section titled “foldCorner”](#foldcorner) > `readonly` **foldCorner**: `"fold_corner"` = `"fold_corner"` A corner is lifted because the pointer hovers over it. ### read [Section titled “read”](#read) > `readonly` **read**: `"read"` = `"read"` Nothing in motion. ### userFold [Section titled “userFold”](#userfold) > `readonly` **userFold**: `"user_fold"` = `"user_fold"` The user is dragging a corner. # Layout > `const` **Layout**: `object` Defined in: [core/src/options.ts:7](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L7) How many pages are visible at once. `auto` picks by container width. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### auto [Section titled “auto”](#auto) > `readonly` **auto**: `"auto"` = `"auto"` ### single [Section titled “single”](#single) > `readonly` **single**: `"single"` = `"single"` ### spread [Section titled “spread”](#spread) > `readonly` **spread**: `"spread"` = `"spread"` # Orientation > `const` **Orientation**: `object` Defined in: [core/src/options.ts:23](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L23) What the book is showing: one page (`portrait`) or a two-page spread (`landscape`). ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### landscape [Section titled “landscape”](#landscape) > `readonly` **landscape**: `"landscape"` = `"landscape"` ### portrait [Section titled “portrait”](#portrait) > `readonly` **portrait**: `"portrait"` = `"portrait"` # PageDensity > `const` **PageDensity**: `object` Defined in: [core/src/options.ts:15](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L15) `hard` pages rotate as a rigid sheet (covers); `soft` pages bend along the fold. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### hard [Section titled “hard”](#hard) > `readonly` **hard**: `"hard"` = `"hard"` ### soft [Section titled “soft”](#soft) > `readonly` **soft**: `"soft"` = `"soft"` # SizeMode > `const` **SizeMode**: `object` Defined in: [core/src/options.ts:40](https://github.com/benhonda/openpageflip/blob/main/packages/core/src/options.ts#L40) How the book sizes itself. ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### fixed [Section titled “fixed”](#fixed) > `readonly` **fixed**: `"fixed"` = `"fixed"` Pages are exactly `width` x `height` CSS pixels. ### stretch [Section titled “stretch”](#stretch) > `readonly` **stretch**: `"stretch"` = `"stretch"` Pages scale to the container, keeping the `width:height` ratio, between `minWidth` and `maxWidth`. # @openpageflip/react React 19 bindings: `FlipBook`, `Page`, and the core types they use. ## Type Aliases [Section titled “Type Aliases”](#type-aliases) * [FlipBookEventProps](/api/openpageflip/react/type-aliases/flipbookeventprops/) * [FlipBookProps](/api/openpageflip/react/type-aliases/flipbookprops/) * [PageProps](/api/openpageflip/react/type-aliases/pageprops/) ## Functions [Section titled “Functions”](#functions) * [FlipBook](/api/openpageflip/react/functions/flipbook/) * [Page](/api/openpageflip/react/functions/page/) ## References [Section titled “References”](#references) ### Book [Section titled “Book”](#book) Re-exports [Book](/api/openpageflip/core/type-aliases/book/) *** ### BookEvents [Section titled “BookEvents”](#bookevents) Re-exports [BookEvents](/api/openpageflip/core/type-aliases/bookevents/) *** ### BookOptions [Section titled “BookOptions”](#bookoptions) Re-exports [BookOptions](/api/openpageflip/core/type-aliases/bookoptions/) *** ### BookRect [Section titled “BookRect”](#bookrect) Re-exports [BookRect](/api/openpageflip/core/type-aliases/bookrect/) *** ### FlipCorner [Section titled “FlipCorner”](#flipcorner) Re-exports [FlipCorner](/api/openpageflip/core/variables/flipcorner/) *** ### FlipState [Section titled “FlipState”](#flipstate) Re-exports [FlipState](/api/openpageflip/core/variables/flipstate/) *** ### Layout [Section titled “Layout”](#layout) Re-exports [Layout](/api/openpageflip/core/variables/layout/) *** ### Orientation [Section titled “Orientation”](#orientation) Re-exports [Orientation](/api/openpageflip/core/variables/orientation/) *** ### PageDensity [Section titled “PageDensity”](#pagedensity) Re-exports [PageDensity](/api/openpageflip/core/variables/pagedensity/) # FlipBook > **FlipBook**(`__namedParameters`): `ReactElement` Defined in: [react/src/FlipBook.tsx:67](https://github.com/benhonda/openpageflip/blob/main/packages/react/src/FlipBook.tsx#L67) ## Parameters [Section titled “Parameters”](#parameters) ### \_\_namedParameters [Section titled “\_\_namedParameters”](#__namedparameters) [`FlipBookProps`](/api/openpageflip/react/type-aliases/flipbookprops/) ## Returns [Section titled “Returns”](#returns) `ReactElement` # Page > **Page**(`__namedParameters`): `ReactElement` Defined in: [react/src/Page.tsx:14](https://github.com/benhonda/openpageflip/blob/main/packages/react/src/Page.tsx#L14) One page of a `FlipBook`. Any child of `FlipBook` becomes a page; `Page` is the way to say which are hard and to put a class or style on the page element itself. ## Parameters [Section titled “Parameters”](#parameters) ### \_\_namedParameters [Section titled “\_\_namedParameters”](#__namedparameters) [`PageProps`](/api/openpageflip/react/type-aliases/pageprops/) ## Returns [Section titled “Returns”](#returns) `ReactElement` # FlipBookEventProps > **FlipBookEventProps** = ``{ [K in keyof BookEvents as `on${Capitalize}`]?: (event: BookEvents[K]) => void }`` Defined in: [react/src/FlipBook.tsx:25](https://github.com/benhonda/openpageflip/blob/main/packages/react/src/FlipBook.tsx#L25) `onFlip`, `onChangeState`, … one prop per core event, typed from the core’s event map. # FlipBookProps > **FlipBookProps** = `Omit`<[`BookOptions`](/api/openpageflip/core/type-aliases/bookoptions/), `"pages"`> & [`FlipBookEventProps`](/api/openpageflip/react/type-aliases/flipbookeventprops/) & `object` Defined in: [react/src/FlipBook.tsx:29](https://github.com/benhonda/openpageflip/blob/main/packages/react/src/FlipBook.tsx#L29) ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### children [Section titled “children”](#children) > **children**: `ReactNode` Each child is a page. Use `Page` to mark hard pages or style the page element. ### className? [Section titled “className?”](#classname) > `optional` **className?**: `string` ### page? [Section titled “page?”](#page) > `optional` **page?**: `number` Controlled page: when it changes, the book flips there. Pair with `onFlip`. ### ref? [Section titled “ref?”](#ref) > `optional` **ref?**: `Ref`<[`Book`](/api/openpageflip/core/type-aliases/book/)> The book’s API, available from the moment the component mounts. ### style? [Section titled “style?”](#style) > `optional` **style?**: `CSSProperties` # PageProps > **PageProps** = `HTMLAttributes`<`HTMLDivElement`> & `object` Defined in: [react/src/Page.tsx:4](https://github.com/benhonda/openpageflip/blob/main/packages/react/src/Page.tsx#L4) ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### children? [Section titled “children?”](#children) > `optional` **children?**: `ReactNode` ### density? [Section titled “density?”](#density) > `optional` **density?**: [`PageDensity`](/api/openpageflip/core/type-aliases/pagedensity/) `hard` pages turn as a rigid sheet. #### Default [Section titled “Default”](#default) ```ts "soft" ```