{"_id":"@abasiakanmbat/stpageflip","name":"@abasiakanmbat/stpageflip","dist-tags":{"latest":"2.1.0"},"versions":{"2.1.0":{"name":"@abasiakanmbat/stpageflip","version":"2.1.0","main":"./dist/js/page-flip.browser.js","module":"./dist/js/page-flip.module.js","types":"./dist/PageFlip.d.ts","browser":"./dist/js/page-flip.browser.js","author":{"name":"oleg.litovski9@gmail.com"},"contributors":[{"name":"Abasiakan Mbat"},{"name":"IniEtim Udo"}],"license":"MIT","description":"Powerful, simple and flexible JS Library for creating realistic and beautiful page turning effect","repository":{"type":"git","url":"git+https://github.com/abasiakanmbat/StPageFlip.git"},"publishConfig":{"access":"public"},"homepage":"https://github.com/abasiakanmbat/StPageFlip#readme","dependencies":{},"devDependencies":{"@typescript-eslint/eslint-plugin":"^2.33.0","@typescript-eslint/parser":"^2.33.0","css-loader":"^3.5.3","eslint":"^7.0.0","eslint-plugin-typescript":"^0.14.0","prettier":"^2.0.5","rollup-plugin-postcss":"^3.1.1","rollup-plugin-terser":"^6.1.0","style-loader":"^1.2.1","ts-loader":"^7.0.4","typedoc":"^0.17.8","typescript":"~4.9.5","webpack":"^4.43.0","webpack-cli":"^3.3.11"},"scripts":{"eslint":"eslint . --ext .ts","build-global":"npx webpack","typecheck":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly","build":"npm run typecheck && npm run build:types && rollup -c","prepublishOnly":"npm run build","serve-demo":"node scripts/serve-demo.js"},"keywords":["typescript","page","flip","canvas","book","reader","fold","frontend","javascript"],"gitHead":"c9474b3c63c7eb61f078d58a4f7338ae302c6ba9","_id":"@abasiakanmbat/stpageflip@2.1.0","bugs":{"url":"https://github.com/abasiakanmbat/StPageFlip/issues"},"_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-Vmk0s9Tl1FWhmZ4HtqO4v0CqmJIp0X42/qI7m+sfhc9ahYJGpPFE0Bhi0ryT/A8AsYkQUIG6ggbCifH+izRFZA==","shasum":"a65e0e0b7b5efe5c2e8da2a857c78840e0a859fc","tarball":"https://registry.npmjs.org/@abasiakanmbat/stpageflip/-/stpageflip-2.1.0.tgz","fileCount":24,"unpackedSize":144162,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCxHglsRhXGeOwC3T1okRICHzfss6UKDVAXpQswaxcwtgIgLYRoAKODnl1KGuJzS58OoYUfysulMLab2cSmoExCO6I="}]},"_npmUser":{"name":"abasiakanmbat","email":"basky2592@gmail.com"},"directories":{},"maintainers":[{"name":"abasiakanmbat","email":"basky2592@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stpageflip_2.1.0_1788881609222_0.08499246593121113"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-08T15:33:29.056Z","2.1.0":"2026-09-08T15:33:29.344Z","modified":"2026-09-08T15:33:29.537Z"},"maintainers":[{"name":"abasiakanmbat","email":"basky2592@gmail.com"}],"description":"Powerful, simple and flexible JS Library for creating realistic and beautiful page turning effect","homepage":"https://github.com/abasiakanmbat/StPageFlip#readme","keywords":["typescript","page","flip","canvas","book","reader","fold","frontend","javascript"],"repository":{"type":"git","url":"git+https://github.com/abasiakanmbat/StPageFlip.git"},"contributors":[{"name":"Abasiakan Mbat"},{"name":"IniEtim Udo"}],"author":{"name":"oleg.litovski9@gmail.com"},"bugs":{"url":"https://github.com/abasiakanmbat/StPageFlip/issues"},"license":"MIT","readme":"[![GitHub license](https://img.shields.io/github/license/abasiakanmbat/StPageFlip)](https://github.com/abasiakanmbat/StPageFlip/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/%40abasiakanmbat%2Fstpageflip)](https://www.npmjs.com/package/@abasiakanmbat/stpageflip) [![npm](https://img.shields.io/npm/dm/%40abasiakanmbat%2Fstpageflip)](https://npmcharts.com/compare/@abasiakanmbat/stpageflip?minimal=true) [![](https://img.shields.io/badge/support-buymeacoffee-orange)](https://www.buymeacoffee.com/nndlik)\n\r\n# StPageFlip\r\n\r\nPowerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.\r\n\r\n![](video.gif)\r\n\r\n### Features\r\n\r\n-   Works with simple images on canvas and complex HTML blocks\r\n-   Has simple API and flexible configuration\r\n-   Compatible with mobile devices\r\n-   Supports landscape and portrait screen mode\r\n-   Supports soft and hard page types (only in HTML mode)\r\n-   No dependencies\r\n\r\nDemo and docs: https://nodlik.github.io/StPageFlip/\r\n\r\nFor React.JS you can use: https://nodlik.github.io/react-pageflip/\r\n\r\nDocs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html\n\n### Local development\n\nThis repository includes a small browser playground for testing changes to the library.\n\nInstall dependencies and start the Webpack watch build:\n\n```powershell\npnpm install --frozen-lockfile\npnpm run build-global\n```\n\nLeave that terminal running. In a second terminal, start the local static server:\n\n```powershell\npnpm run serve-demo\n```\n\nOpen http://localhost:8080/demo/ in a browser. Edit files in `src/`, wait for Webpack to rebuild `dist/js/pageFlip.browser.js`, then refresh the page.\n\n### Installation\n\nInstall the maintained fork from npm:\n\n```powershell\nnpm install @abasiakanmbat/stpageflip\n```\n\nThe package includes the browser bundle, ES module bundle, and TypeScript declarations. If your npm username is different, replace `@abasiakanmbat` with your own npm scope.\n\r\n### Usage\r\n\r\nIf you've installed the package from npm, import `PageFlip` from the package, or use the browser bundle with a `<script>` tag:\n\r\n```html\r\n<script src=\"{path/to/scripts}/page-flip.browser.js\"></script>\r\n```\r\n\r\nTo create a new PageFlip object:\r\n\r\n```js\r\nimport { PageFlip } from '@abasiakanmbat/stpageflip';\n\r\nconst pageFlip = new PageFlip(htmlParentElement, settings);\r\n\r\n// or if you're using a script tag and page-flip.browser.js:\r\nconst pageFlip = new St.PageFlip(htmlParentElement, settings);\n```\n\n### Publishing updates\n\nThis repository is the reusable library. Keep your website, authentication, book database, uploads, and API in a separate application repository. Publish library changes here, then install the package in that application.\n\nBefore the first release, make sure the npm `name` in `package.json` uses a scope that you own. The default scope in this fork is `@abasiakanmbat`.\n\nBuild and inspect the exact files that npm will publish:\n\n```powershell\nnpm install\nnpm run build\nnpm pack --dry-run\n```\n\nThe package preview must contain `dist/js/page-flip.browser.js`, `dist/js/page-flip.module.js`, `dist/PageFlip.d.ts`, `README.md`, and `LICENSE`. The `prepublishOnly` script runs the production build automatically during publishing.\n\nAfter updating the version according to semantic versioning, publish it with:\n\n```powershell\nnpm login\nnpm publish --access public\n```\n\nConsumers can then install the new version with `npm install @abasiakanmbat/stpageflip`.\n\n### Using it in an application\n\nUse React, Next.js, or Angular as a separate frontend project. Fetch ordered page-image URLs from your backend and pass them to `loadFromImages()`:\n\n```js\nconst response = await fetch('/api/books/book-1/');\nconst book = await response.json();\npageFlip.loadFromImages(book.pages);\n```\n\nThe backend should expose `GET /api/books/:id/`, `GET /api/books/:id/progress/`, and `PUT /api/books/:id/progress/`. Listen for the `flip` event to save the zero-based page index:\n\n```js\npageFlip.on('flip', (event) => {\n    // Save event.data through your authenticated API.\n});\n```\n\nIn React and Next.js, initialize the library in a client-side effect and destroy it during cleanup. In Angular, initialize it after the browser view is rendered and destroy it in the component destroy hook. This library uses browser DOM and canvas APIs, so it must not be initialized during server rendering.\n\nFor Vercel, deploy the frontend and API from Git-connected projects. Next.js route handlers are the simplest single-project option; Express and Django can also be deployed as separate backend projects. Store page images in object storage or a CDN and keep book records and progress in a persistent database. Configure the API's CORS allow-list to contain only the deployed frontend origin.\n\r\n`htmlParentElement - HTMLElement`- root element, where the book will be created\r\n\r\n`settings: object` - configuration object.\r\n\r\nTo draw on a canvas, use `loadFromImages`:\r\n\r\n```js\r\npageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);\r\n```\r\n\r\nTo load page from html elements - use `loadFromHtml`:\r\n\r\n```js\r\npageFlip.loadFromHtml(items);\r\n```\r\n\r\nFor example:\r\n\r\n```html\r\n<div id=\"book\">\r\n    <div class=\"my-page\" data-density=\"hard\">\r\n        Page Cover\r\n    </div>\r\n    <div class=\"my-page\">\r\n        Page one\r\n    </div>\r\n    <div class=\"my-page\">\r\n        Page two\r\n    </div>\r\n    <div class=\"my-page\">\r\n        Page three\r\n    </div>\r\n    <div class=\"my-page\">\r\n        Page four\r\n    </div>\r\n    <div class=\"my-page\" data-density=\"hard\">\r\n        Last page\r\n    </div>\r\n</div>\r\n```\r\n\r\n```js\r\nconst pageFlip = new PageFlip(document.getElementById('book'), {\r\n    width: 400, // required parameter - base page width\r\n    height: 600, // required parameter - base page height\r\n});\r\n\r\npageFlip.loadFromHTML(document.querySelectorAll('.my-page'));\r\n```\r\n\r\nUse `data-density=\"hard\"` attribute to specify page type (`soft | hard`) and define flipping animation.\r\n\r\n### Config\r\n\r\nTo set configuration define these parameters when creating an object:\r\n\r\n-   `width: number` - required\r\n-   `height: number` - required\r\n-   `size: (\"fixed\", \"stretch\")` - default: `\"fixed\"` Whether the book will be stretched under the parent element or not\r\n-   `minWidth, maxWidth, minHeight, maxHeight: number` You must set threshold values ​​with size: `\"stretch\"`\r\n-   `drawShadow: bool` - default: `true` Draw shadows or not when page flipping\r\n-   `flippingTime: number` (milliseconds) - default: `1000` Flipping animation time\r\n-   `usePortrait: bool` - default: `true` Enable switching to portrait mode. !This mode uses cloning of html elements (pages)\r\n-   `startZIndex: number` - default: `0` Initial value to z-index\r\n-   `startPage: number` - default: `0` Page number from which to start viewing\r\n-   `autoSize: bool` - default: `true` If this value is true, the parent element will be equal to the size of the book\r\n-   `maxShadowOpacity: number [0..1]` - default: `1` Shadow intensity (1: max intensity, 0: hidden shadows)\r\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\r\n-   `mobileScrollSupport: boolean` - default: `true` disable content scrolling when touching a book on mobile devices\r\n-   `swipeDistance: number` - default: `30` (px) minimum distance to detect swipe (new on 1.1.0)\r\n-   `clickEventForward: boolean` - default: `true` forwarding click events to the page children html elements (only for `a` and `button` tags) (new on 1.1.0)\r\n-   `useMouseEvents: boolean` - default: `true` using mouse and touch events to page flipping (new on 1.2.0)\r\n-   `disableFlipByClick: boolean` - default: `false` if this value is true, flipping by clicking on the whole book will be locked. Clicking will only work in corners (new on 2.0.3)\r\n\r\n### Events\r\n\r\nTo listen events use the method `on`:\r\n\r\n```js\r\npageFlip.on('flip', (e) => {\r\n    // callback code\r\n    alert(e.data); // current page number\r\n});\r\n```\r\n\r\nAvailable events:\r\n\r\n-   `flip: number` - triggered by page turning\r\n-   `changeOrientation: (\"portrait\", \"landscape\")` - triggered when page orientation changes\r\n-   `changeState: (\"user_fold\", \"fold_corner\", \"flipping\", \"read\")` - triggered when the state of the book changes\r\n-   `init: ({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\r\n-   `update: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book pages are updated (using the \"updateFrom...\" methods)\r\n\r\nEvent object has two fields: `data: number | string` and `object: PageFlip`\r\n\r\n### Methods\r\n\r\n-   `getPageCount: number` - Get number of all pages\r\n-   `getOrientation: 'portrait', 'landscape'` - Get the current orientation: portrait or landscape\r\n-   `getBoundsRect: PageRect` - Get current book sizes and position\r\n-   `getCurrentPageIndex: number` - Get the current page number (starts at 0)\r\n-   `turnToPage(pageNum: number)` - Turn to the specified page number (without animation)\r\n-   `turnToNextPage()` - Turn to the next page (without animation)\r\n-   `turnToPrevPage()` - Turn to the previous page (without animation)\r\n-   `flipNext(corner: 'top' | 'bottom')` - Turn to the next page (with animation)\r\n-   `flipPrev(corner: 'top' | 'bottom')` - Turn to the previous page (with animation)\r\n-   `flip(pageNum: number, corner: 'top' | 'bottom')` - Turn to the specified page (with animation)\r\n-   `loadFromImages(images: ['path-to-image1.jpg', ...])` - Load page from images\r\n-   `loadFromHtml(items: NodeListOf | HTMLElement[])` - Load page from html elements\r\n-   `updateFromHtml(items: NodeListOf | HTMLElement[])` - Update page from html elements (new on 0.4.0)\r\n-   `updateFromImages(images: ['path-to-image1.jpg', ...])` - Update page from images (new on 0.4.0)\r\n-   `destroy()` - Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)\r\n\r\n### Contacts\r\n\r\nOleg,\r\n\r\n<oleg.litovski9@gmail.com>\r\n\r\nhttps://github.com/Nodlik/StPageFlip\r\n\r\n[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]\r\n\r\n[buymeacoffee]: https://www.buymeacoffee.com/nndlik\r\n[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\r\n","readmeFilename":"README.md","_rev":"1-edcad95d3db7334cfa04c3f765980bcc"}