{"id":28381035,"url":"https://github.com/nodlik/react-pageflip","last_synced_at":"2025-06-25T01:32:04.534Z","repository":{"id":40446031,"uuid":"271279663","full_name":"Nodlik/react-pageflip","owner":"Nodlik","description":"Simple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect","archived":false,"fork":false,"pushed_at":"2023-08-26T14:53:16.000Z","size":11829,"stargazers_count":539,"open_issues_count":45,"forks_count":102,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-30T03:40:03.537Z","etag":null,"topics":["animation","book","effects","flip","fold","javascript","page","react","reactjs"],"latest_commit_sha":null,"homepage":"https://nodlik.github.io/react-pageflip/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nodlik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/nndlik"]}},"created_at":"2020-06-10T13:07:28.000Z","updated_at":"2025-05-29T06:57:45.000Z","dependencies_parsed_at":"2024-06-18T14:01:38.278Z","dependency_job_id":"194755e1-3f5f-47aa-ab8e-8399770e9fa9","html_url":"https://github.com/Nodlik/react-pageflip","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":0.2727272727272727,"last_synced_commit":"0bb13dd9a5d26719ee8c2a0b7404389ea94e5915"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/Nodlik/react-pageflip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2Freact-pageflip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2Freact-pageflip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2Freact-pageflip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2Freact-pageflip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nodlik","download_url":"https://codeload.github.com/Nodlik/react-pageflip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2Freact-pageflip/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261785262,"owners_count":23209275,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","book","effects","flip","fold","javascript","page","react","reactjs"],"created_at":"2025-05-30T03:37:47.218Z","updated_at":"2025-06-25T01:32:04.511Z","avatar_url":"https://github.com/Nodlik.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/nndlik"],"categories":[],"sub_categories":[],"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)\n\n# Version 2.0.0\n\nThis version fixed some bugs and is completely written with react hooks.\n!!! Method access api changed !!!\n\n# React.js wrapper for StPageFlip\n\nSimple React.js wrapper for StPageFlip library, for creating realistic and beautiful page turning effect\n\n![](video.gif)\n\n### Features of StPageFlip\n\n-   Works with simple images on canvas and complex HTML blocks\n-   Has simple API and flexible configuration\n-   Compatible with mobile devices\n-   Supports landscape and portrait screen mode\n-   Supports soft and hard page types (only in HTML mode)\n-   No dependencies\n\nLive Demo with source code: https://nodlik.github.io/react-pageflip/\n\nDocs and examples to StPageFlip: https://nodlik.github.io/StPageFlip/\n\nDocs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html\n\n### Installation\n\nYou can install the latest version using npm:\n\n`npm install react-pageflip`\n\n### Basic Usage\n\n```jsx\nimport HTMLFlipBook from 'react-pageflip';\n\nfunction MyBook(props) {\n    return (\n        \u003cHTMLFlipBook width={300} height={500}\u003e\n            \u003cdiv className=\"demoPage\"\u003ePage 1\u003c/div\u003e\n            \u003cdiv className=\"demoPage\"\u003ePage 2\u003c/div\u003e\n            \u003cdiv className=\"demoPage\"\u003ePage 3\u003c/div\u003e\n            \u003cdiv className=\"demoPage\"\u003ePage 4\u003c/div\u003e\n        \u003c/HTMLFlipBook\u003e\n    );\n}\n```\n\n### Advanced Usage\n\nYou can define pages as a component, but in this case you should use `React.forwardRef` method. Like this:\n\n```jsx\nconst Page = React.forwardRef((props, ref) =\u003e {\n    return (\n        \u003cdiv className=\"demoPage\" ref={ref}\u003e\n            /* ref required */\n            \u003ch1\u003ePage Header\u003c/h1\u003e\n            \u003cp\u003e{props.children}\u003c/p\u003e\n            \u003cp\u003ePage number: {props.number}\u003c/p\u003e\n        \u003c/div\u003e\n    );\n});\n\nfunction MyBook(props) {\n    return (\n        \u003cHTMLFlipBook width={300} height={500}\u003e\n            \u003cPage number=\"1\"\u003ePage text\u003c/Page\u003e\n            \u003cPage number=\"2\"\u003ePage text\u003c/Page\u003e\n            \u003cPage number=\"3\"\u003ePage text\u003c/Page\u003e\n            \u003cPage number=\"4\"\u003ePage text\u003c/Page\u003e\n        \u003c/HTMLFlipBook\u003e\n    );\n}\n```\n\n### Props\n\nTo set configuration use these props:\n\n-   `width: number` - required\n-   `height: number` - required\n-   `size: (\"fixed\", \"stretch\")` - default: `\"fixed\"` Whether the book will be stretched under the parent element or not\n-   `minWidth, maxWidth, minHeight, maxHeight: number` You must set threshold values ​​with size: `\"stretch\"`\n-   `drawShadow: bool` - default: `true` Draw shadows or not when page flipping\n-   `flippingTime: number` (milliseconds) - default: `1000` Flipping animation time\n-   `usePortrait: bool` - default: `true` Enable switching to portrait mode\n-   `startZIndex: number` - default: `0` Initial value to z-index\n-   `autoSize: bool` - default: `true` If this value is true, the parent element will be equal to the size of the book\n-   `maxShadowOpacity: number [0..1]` - default: `1` Shadow intensity (1: max intensity, 0: hidden shadows)\n-   `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\n-   `mobileScrollSupport: boolean` - default: `true` disable content scrolling when touching a book on mobile devices\n-   `swipeDistance: number` - default: `30` (px) minimum distance to detect swipe\n-   `clickEventForward: boolean` - default: `true` forwarding click events to the page children html elements (only for `a` and `button` tags)\n-   `useMouseEvents: boolean` - default: `true` using mouse and touch events to page flipping\n-   `renderOnlyPageLengthChange: boolean` - default: `false` (NEW on 2.0.0) if this flag is active, the book will be updated and re-rendered ONLY if the number of pages has changed\n\n### Events\n\nYou can use the following events:\n\n```jsx\n...\nfunction DemoBook() {\n    const onFlip = useCallback((e) =\u003e {\n        console.log('Current page: ' + e.data);\n    }, []);\n\n    return (\n        \u003cHTMLFlipBook\n            /* props */\n            onFlip={onFlip}\n        \u003e\n        /* ... pages */\n        \u003c/HTMLFlipBook\u003e\n    )\n}\n```\n\n**Available events:**\n\n-   `onFlip: number` - triggered by page turning\n-   `onChangeOrientation: (\"portrait\", \"landscape\")` - triggered when page orientation changes\n-   `onChangeState: (\"user_fold\", \"fold_corner\", \"flipping\", \"read\")` - triggered when the state of the book changes\n-   `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\n-   `onUpdate: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book pages are updated (using the \"updateFrom...\" methods)\n\nEvent object has two fields: `data: number | string` and `object: PageFlip`\n\n### Methods\n\nTo use methods, you need to get a `PageFlip` object. This can be done using React `ref` and `pageFlip(): PageFlip` method\nFor example - flipping to the next page:\n\n```jsx\n  function DemoBook() {\n        const book = useRef();\n\n        return (\n            \u003c\u003e\n                \u003cbutton onClick={() =\u003e\n                    book.current.pageFlip().flipNext()}\u003eNext page\u003c/button\u003e\n\n                \u003cHTMLFlipBook\n                    ...\n                    ref={book}\n                    ...\n                \u003e\n                    /* ... pages */\n                \u003c/HTMLFlipBook\u003e\n            \u003c/\u003e\n        )\n  }\n```\n\n**Available methods:**\n\n| Method name           | Parameters                                   | Return type               | Description                                                    |\n| --------------------- | -------------------------------------------- | ------------------------- | -------------------------------------------------------------- |\n| `getPageCount`        | ` `                                          | `number`                  | Get number of all pages                                        |\n| `getCurrentPageIndex` | ` `                                          | `number`                  | Get the current page number (starts at 0)                      |\n| `getOrientation`      | ` `                                          | `'portrait', 'landscape'` | Get the current orientation: portrait or landscape             |\n| `getBoundsRect`       | ` `                                          | `PageRect`                | Get current book sizes and position                            |\n| `turnToPage`          | `pageNum: number`                            | `void`                    | Turn to the specified page number (without animation)          |\n| `turnToNextPage`      | ` `                                          | `void`                    | Turn to the next page (without animation)                      |\n| `turnToPrevPage`      | ` `                                          | `void`                    | Turn to the previous page (without animation)                  |\n| `flipNext`            | `corner: ['top', 'bottom']`                  | `void`                    | Turn to the next page (with animation)                         |\n| `flipPrev`            | `corner: ['top', 'bottom']`                  | `void`                    | Turn to the previous page (with animation)                     |\n| `flip`                | `pageNum: number, corner: ['top', 'bottom']` | `void`                    | Turn to the specified page (with animation)                    |\n| `loadFromImages`      | `images: ['path-to-image1.jpg', ...]`        | `void`                    | Load page from images                                          |\n| `loadFromHtml`        | `items: NodeListOf, HTMLElement[]`           | `void`                    | Load page from html elements                                   |\n| `updateFromHtml`      | `items: NodeListOf, HTMLElement[]`           | `void`                    | Update page from html elements                                 |\n| `updateFromImages`    | `images: ['path-to-image1.jpg', ...]`        | `void`                    | Update page from images                                        |\n| `destroy`             | ` `                                          | `void`                    | Destructor. Removes Parent HTML Element and all event handlers |\n\n### Contacts\n\nOleg,\n\n\u003coleg.litovski9@gmail.com\u003e\n\nhttps://github.com/Nodlik/react-pageflip\n\n[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]\n\n[buymeacoffee]: https://www.buymeacoffee.com/nndlik\n[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodlik%2Freact-pageflip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnodlik%2Freact-pageflip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodlik%2Freact-pageflip/lists"}