react-pageflip

Use the following props to configure the behavior and appearance of the book:

You can listen to various lifecycle and interaction events. The event object contains data (the value associated with the event) and object (the PageFlip instance).

```jsx
function DemoBook() {
    const onFlip = useCallback((e) => {
        console.log('Current page: ' + e.data);
    }, []);

    return (
        <HTMLFlipBook
            onFlip={onFlip}
        >
            {/* ... pages */}
        </HTMLFlipBook>
    )
}

Available Events:

• onFlip: number — Triggered by page turning.
• onChangeOrientation: 'portrait' | 'landscape' — Triggered when orientation changes.
• onChangeState: 'user_fold' | 'fold_corner' | 'flipping' | 'read' — Triggered when the book state changes.
• onInit: ({page: number, mode: 'portrait' | 'landscape'}) — Triggered when the book is initialized. Listen to this before calling loadFrom... methods.
• onUpdate: ({page: number, mode: 'portrait' | 'landscape'}) — Triggered when pages are updated via updateFrom... methods.

The IFlipSetting interface defines the configuration options for the react-pageflip component. Use these properties to control the book's dimensions, animation behavior, shadow effects, and interaction modes.

Key Configuration Groups

Sizing and Layout

• size: Determines if the book is 'fixed' or 'stretch' under the parent element.
• width, height: Dimensions of the book.
• minWidth, maxWidth, minHeight, maxHeight: Constraints for the book size.
• autoSize: If true, the parent element will match the size of the book.
• usePortrait: Enables switching to portrait mode.

Visual Effects

• drawShadow: Boolean to enable/disable shadows during page flipping.
• maxShadowOpacity: Controls shadow intensity (0 to 1).
• showPageCorners: If true, folds the corners of the book when the mouse pointer is over them.
• showCover: If true, the first and last pages are treated as hard covers and shown in single-page mode.

Interaction and Animation

• startPage: The page number from which to start viewing.
• flippingTime: Duration of the flipping animation.
• useMouseEvents: Enables mouse and touch events for flipping.
• swipeDistance: Distance required for a swipe to trigger a flip.
• disableFlipByClick: If true, clicking the whole book is locked; flipping only works via corners.
• clickEventForward: If true, clicks on child elements (buttons, links) are forwarded.
• mobileScrollSupport: If true, content scrolling is enabled on mobile devices when touching the book.

const settings: IFlipSetting = {
  startPage: 0,
  size: 'stretch',
  width: 800,
  height: 600,
  drawShadow: true,
  maxShadowOpacity: 0.5,
  showCover: true,
  useMouseEvents: true,
  // ... other properties
};

If you need to call imperative methods on the underlying PageFlip engine (such as manual page navigation or updating the book), you can use a ref on the HTMLFlipBook component.

The ref provides an object containing a pageFlip() method that returns the actual PageFlip instance.

Note: The ref type is React.MutableRefObject<PageFlip> (where PageFlip is imported from the page-flip package).

import React, { useRef } from 'react';
import { HTMLFlipBook } from 'react-pageflip';
import { PageFlip } from 'page-flip';

const BookController = () => {
  const flipRef = useRef<{ pageFlip: () => PageFlip }>(null);

  const handleNextPage = () => {
    if (flipRef.current) {
      const api = flipRef.current.pageFlip();
      api.flipNext(); // Example method from page-flip
    }
  };

  return (
    <>
      <button onClick={handleNextPage}>Next</button>
      <HTMLFlipBook
        ref={flipRef}
        className="book"
        style={{ width: '500px', height: '700px' }}
      >
        <div className="page">Page 1</div>
        <div className="page">Page 2</div>
      </HTMLFlipBook>
    </>
  );
};

The HTMLFlipBook component is the primary entry point for rendering page flip effects in React. It acts as a wrapper around the StPageFlip library.

To use it, wrap your page elements (as React children) inside the HTMLFlipBook component. The component requires a className and style prop. It also accepts configuration settings via IFlipSetting and event handlers via IEventProps.

Key requirements:

• Each child passed to HTMLFlipBook must be a valid React element that can accept a ref (as the component uses these refs to manage the underlying DOM elements for the flip effect).
• The component uses React.memo for performance optimization.

import { HTMLFlipBook } from 'react-pageflip';

function MyBook() {
  return (
    <HTMLFlipBook
      className="book-container"
      style={{ width: '500px', height: '700px' }}
    >
      <div className="page">Page 1</div>
      <div className="page">Page 2</div>
      <div className="page">Page 3</div>
    </HTMLFlipBook>
  );
}