Comments (4)
YO @juncraul guess what? I was able to solve it! 🥳🥳🥳🎉🎉🚀🚀🚀🚀🚀🚀
I honestly have no idea how to make a smaller-scale example of this. But this is the rough code and description for this that made it work, so bare with me:
- I have a
width
andheight
from a state (this might not be necessary for your case but I wanted to have customizable sizes). Thewidth
andheight
comes from the callback resolved when I use react-pdf, which basically refers to the width and height of 1 page (not the book so like the width and height of the paper). - I use that
width
andheight
for the parent div of the<HTMLFlipBook />
. The parent div has awidth * 2
because it has to be big enough for two pages. Also notice how the width used insideHTMLFlipBook
's props is not multiplied by 2 because I think width and height only refers to 1 page here, not the book. - I added a
border
class to the div. (It's weird but THIS WAS SUPER IMPORTANT to make this work). - Add the
minHeight: 0, and height: height
on the Flip Book. Because for some weird reason the minimum height given to thestf_parent
div is like 2x of what it's supposed to be, making the page look tall and centered. - Lastly, add the
usePortrait
boolean. Attach it to a useState if you want. - Additionally, if you want to make it responsive, just attach it to a library like
useMediaQuery
and control those states.
<div
style={{ width: width! * 2, height: height }}
className="relative bg-primary-100 pointer-events-auto border"
>
<HTMLFlipBook
key={`${width}-${height}-${isPortrait}`}
style={{
minHeight: 0,
height: height,
}}
usePortrait={isPortrait}
width={width!}
height={height!}
maxShadowOpacity={0.2}
showCover
onFlip={onPageFlip}
>
{renderedPages}
</HTMLFlipBook>
</div>
from react-pageflip.
Looking for an answer for this as well.
from react-pageflip.
Hey @Blankeos excellent implementation of react page flip, where can i find the full implementation of this library, is it possible for you to share your full code?
from react-pageflip.
@Blankeos can you show entire code for this?
from react-pageflip.
Related Issues (20)
- Is there any way to interact with the content? HOT 1
- Unwanted line in Firefox
- Each child in a list should have a unique "key" prop error with child components HOT 1
- images displays blurry on ios HOT 1
- Odd number of images
- How to center the book on close?? HOT 1
- Issue with responsiveness. HOT 1
- can you please put an autoCenter functionality in the book? Because it's not centered when the book is closed. I want the book fully centered on both opening and closing. I am sure you will solve my problem. I am working on it for 1 month but I can't fix it. Thank you
- Can we change the animation of the flip ?
- UX: how to invite user interaction with a pageflip
- First page cover only HOT 2
- Nextjs ref is always null
- There are click events in the content, seemingly can not prohibit bubbling, how to solve
- Can I put only image in page?
- Change Shadow flip color
- Flip corner animation doesn't have same effect as desktop on mobile
- Zoom in/out Functionality needs to add
- Animation from cover to first page on mobile looks different to example
- No flip animation each page is rendering independantly HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pageflip.