# m-react-pageflip

> Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect (forked to depend on m-page-flip)

Latest version **0.1.7** (published 2021-01-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install m-react-pageflip
pnpm add m-react-pageflip
yarn add m-react-pageflip
bun add m-react-pageflip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2021-01-29 |
| First published | 2021-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | oleg.litovski9@gmail.com |
| Maintainers | musaticsgilbert |
| Keywords | react, reactjs, page, flip, book, reader, fold, frontend, javascript |

## Links

- npm: https://www.npmjs.com/package/m-react-pageflip
- Repository: https://github.com/musaticsgilbert/react-pageflip
- Homepage: https://nodlik.github.io/react-pageflip/
- Issues: https://github.com/musaticsgilbert/react-pageflip/issues
- npm.io page: https://npm.io/package/m-react-pageflip

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.13.1
- [rollup](https://npm.io/package/rollup.md) ^2.26.0
- [m-page-flip](https://npm.io/package/m-page-flip.md) latest

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2021-01-29
- 0.1.6 — 2021-01-29

## README

[![GitHub license](https://img.shields.io/github/license/Nodlik/react-pageflip)](https://github.com/Nodlik/react-pageflip/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/react-pageflip)](https://www.npmjs.com/package/react-pageflip) [![npm](https://img.shields.io/npm/dm/react-pageflip)](https://npmcharts.com/compare/react-pageflip?minimal=true) [![](https://img.shields.io/badge/support-buymeacoffee-orange)](https://www.buymeacoffee.com/nndlik)

# React.js wrapper for StPageFlip
Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect (forked to depend on m-page-flip instead)

![](video.gif)

### Features of StPageFlip
* Works with simple images on canvas and complex HTML blocks
* Has simple API and flexible configuration
* Compatible with mobile devices
* Supports landscape and portrait screen mode
* Supports soft and hard page types (only in HTML mode) 
* No dependencies

Live Demo with source code: https://nodlik.github.io/react-pageflip/

Docs and examples to StPageFlip: https://nodlik.github.io/StPageFlip/

Docs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html

### Installation
You can install the latest version using npm:

```npm install react-pageflip```

### Basic Usage

```jsx
import HTMLFlipBook from "react-pageflip";

function MyBook(props) {
  return (
    <HTMLFlipBook width={300} height={500}>
      <div className="demoPage">Page 1</div>
      <div className="demoPage">Page 2</div>
      <div className="demoPage">Page 3</div>
      <div className="demoPage">Page 4</div>
    </HTMLFlipBook>
  );
}
```

### Advanced Usage

You can define pages as a component, but in this case you should use ```React.forwardRef``` method. Like this:
```jsx
const Page = React.forwardRef((props, ref) => {
  return (
    <div className="demoPage" ref={ref}> /* ref required */
      <h1>Page Header</h1>
      <p>{props.children}</p>
      <p>Page number: {props.number}</p>
    </div>
  );
});

function MyBook(props) {
  return (
    <HTMLFlipBook width={300} height={500}>
      <Page number="1">Page text</Page>
      <Page number="2">Page text</Page>
      <Page number="3">Page text</Page>
      <Page number="4">Page text</Page>
    </HTMLFlipBook>
  );
}
```

### Props

To set configuration use these props:

* ```width: number``` - required
* ```height: number``` - required
* ```size: ("fixed", "stretch")``` - default: ```"fixed"``` Whether the book will be stretched under the parent element or not
* ```minWidth, maxWidth, minHeight, maxHeight: number``` You must set threshold values ​​with size: ```"stretch"```
* ```drawShadow: bool``` - default: ```true``` Draw shadows or not when page flipping
* ```flippingTime: number``` (milliseconds) - default: ```1000``` Flipping animation time
* ```usePortrait: bool``` - default: ```true``` Enable switching to portrait mode
* ```startZIndex: number``` - default: ```0``` Initial value to z-index
* ```autoSize: bool``` - default: ```true``` If this value is true, the parent element will be equal to the size of the book
* ```maxShadowOpacity: number [0..1]``` - default: ```1``` Shadow intensity (1: max intensity, 0: hidden shadows)
* ```showCover: boolean``` - default: ```false``` If this value is true, the first and the last pages will be marked as hard and will be shown in single page mode 
* ```mobileScrollSupport: boolean``` - default: ```true``` disable content scrolling when touching a book on mobile devices
* ```swipeDistance: number``` - default: ```30``` (px) minimum distance to detect swipe 
* ```clickEventForward: boolean``` - default: ```true``` forwarding click events to the page children html elements (only for ```a``` and ```button``` tags)
* ```useMouseEvents: boolean``` - default: ```true``` using mouse and touch events to page flipping

### Events
You can use the following events:
```jsx
...
class DemoBook extends React.Component {
    onFlip(data) {
        console.log('Current page: ' + data);
    }

    render() {
        return (
            <HTMLFlipBook
             /* props */
             onFlip={(e) => this.onFlip(e.data)}
            >
            /* ... pages */
            </HTMLFlipBook>
        )
    }
}
```
**Available events:**
* ```onFlip: number``` - triggered by page turning
* ```onChangeOrientation: ("portrait", "landscape")``` - triggered when page orientation changes
* ```onChangeState: ("user_fold", "fold_corner", "flipping", "read")``` - triggered when the state of the book changes
* ```onInit: ({page: number, mode: 'portrait', 'landscape'})``` - triggered when the book is init and the start page is loaded. Listen (`on`) this event before using the "loadFrom..." methods
* ```onUpdate: ({page: number, mode: 'portrait', 'landscape'})``` - triggered when the book pages are updated (using the "updateFrom..." methods)

Event object has two fields: ```data: number | string``` and ```object: PageFlip```

### Methods

To use methods, you need to get a ```PageFlip``` object. This can be done using ```ref``` and ```getPageFlip(): PageFlip``` method
```jsx
  render() {
    return (
        <HTMLFlipBook
            ...
            ref={(component) => (this.pageFlip = component)}
            ...
        >
            /* ... pages */
        </HTMLFlipBook>
    )
  }
```
For example - flipping to the next page:
```js
this.pageFlip.getPageFlip().flipNext();
```
**Available methods:**

| Method name | Parameters | Return type | Description|
| ----------- | ---------- | ----------- | ---------- |
| `getPageCount` | ` ` | `number` | Get number of all pages |
| `getCurrentPageIndex` | ` ` | `number` | Get the current page number (starts at 0) |
| `getOrientation` | ` ` | `'portrait', 'landscape'` | Get the current orientation: portrait or landscape
| `getBoundsRect` | ` ` | `PageRect` | Get current book sizes and position
| `turnToPage` | `pageNum: number` | `void` | Turn to the specified page number (without animation)
| `turnToNextPage` | ` ` | `void` | Turn to the next page (without animation)
| `turnToPrevPage` | ` ` | `void` | Turn to the previous page (without animation)
| `flipNext` | `corner: ['top', 'bottom']` | `void` | Turn to the next page (with animation)
| `flipPrev` | `corner: ['top', 'bottom']` | `void`  | Turn to the previous page (with animation)
| `flip` | `pageNum: number, corner: ['top', 'bottom']` | `void` | Turn to the specified page (with animation)
| `loadFromImages` | `images: ['path-to-image1.jpg', ...]` | `void` | Load page from images
| `loadFromHtml` | `items: NodeListOf, HTMLElement[]` | `void` | Load page from html elements
| `updateFromHtml` | `items: NodeListOf, HTMLElement[]` | `void` | Update page from html elements
| `updateFromImages` | `images: ['path-to-image1.jpg', ...]` | `void` | Update page from images
| `destroy` | ` ` | `void` | Destructor. Removes Parent HTML Element and all event handlers


### Contacts
Oleg,

<oleg.litovski9@gmail.com>

https://github.com/Nodlik/react-pageflip


[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]

 [buymeacoffee]: https://www.buymeacoffee.com/nndlik
 [buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png

---
_Source: https://npm.io/package/m-react-pageflip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._