How to force 1 page only to be rendered on mobile?

[Blankeos]

I want to make my flipbook a little bit more responsive. Kind of hard to do. For mobile, ideally I'd want it to just render 1 page instead of two since it's too small if it renders two pages in a small width.

[juncraul]

Looking for an answer for this as well.

[Blankeos]

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:

1. I have a width and height from a state (this might not be necessary for your case but I wanted to have customizable sizes). The width and height 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).
2. I use that width and height for the parent div of the <HTMLFlipBook />. The parent div has a width * 2 because it has to be big enough for two pages. Also notice how the width used inside HTMLFlipBook's props is not multiplied by 2 because I think width and height only refers to 1 page here, not the book.
3. I added a border class to the div. (It's weird but THIS WAS SUPER IMPORTANT to make this work).
4. Add the minHeight: 0, and height: height on the Flip Book. Because for some weird reason the minimum height given to the stf_parent div is like 2x of what it's supposed to be, making the page look tall and centered.
5. Lastly, add the usePortrait boolean. Attach it to a useState if you want.
6. 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>

[SaikiranReddyKudumula]

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?

[lhaynes96]

@Blankeos can you show entire code for this?