Disable page flip on click for custom pages

[abhaykumar01234]

In my flip book, I have designed a menu(appendix) to navigate to custom pages. But since the default behavior on click is to navigate to next page, unable to overwrite that. please let me know.

The prop disableFlipByClick={currentPageNum === 3} not working

[Levike34]

I found the solution bro:

<HTMLFlipBook className='Book' disableFlipByClick={true} padding-bottom={200} width={500} height={700}>

[TaliSeroussi]

I think that because of react.memo on HTMLFlipBook, the component doesn't re-renders. so even though you declared a condition currentPageNum === 3, it will always stay the same Boolean as it was when the component rendered. I wanted to change useMouseEvents with a state and could'nt :(

[crushingCodes]

@abhaykumar01234 @TaliSeroussi This is a workaround I used for this to force a rerender

const MyComponent = ()=>{
  const [rand, setRand] = useState<number>(0);
  const forceUpdate = () => {
    setRand(Math.random());
  };
return (
  <HTMLFlipBook key={`${rand}`} />
)
}

[ImantsSkultans]

If You want completely disable page flip in some situations, then You can wrap HTMLFlipBook with parent container which conditionally has css class with "pointer-events: none". And in page with menus just add z-index and pointer-events: all.

const flipBookRef = useRef(null);
const [flipBook, setFlipBook] = useState(null);

const onInit = () => {
    if (flipBookRef?.current) {
     const fb = flipBookRef.current.pageFlip();

      // navigate to second page on initialisation
      fb.flip(2, 'bottom');

      // store fb instance for interacting with flip book - for navigating to any page
      setFlipBook(fb);
    }
  };

<div className={clsx(classes.bookWrapperStyle, isBlocked && classes.blockedStyle)}>
  <HTMLFlipBook
    width={pageWidth}
    height={pageHeight}
    size="fixed"
    maxShadowOpacity={0.5}
    showCover={true}
    mobileScrollSupport={false}
    ref={flipBookRef}
    onInit={onInit}
    autoSize
    swipeDistance={100}
    clickEventForward={false}
    disableFlipByClick
    showPageCorners={false}
  >
          ...
    </HTMLFlipBook>
  </div>

[sulemanahsancui]

thanks dude you solve my problem!!! i was doing to programmatically flip pages . @ImantsSkultans

[nachooosss]

Currently I am using react-pageflip in next js and I would like to stop the pages from flipping, especially the hovering of the corners. I found the showPageCorners property. The issue is that controlling this reactively has not been possible for me. In fact, I can control nothing in the component with usestate. Currently I have it with a variable that is basically activating a magnifying glass that I have, what I want is that when it is active it deactivates at least showPageCorners here the code

<HTMLFlipBook ref={flipBookRef} width={size.width} height={size.height} maxShadowOpacity={0.5} startZIndex={1} flippingTime={600} showPageCorners={!magnifierVisible} onFlip={(e) => setPageNumber(e.data + 1)}

I tried to do it using the ref methods but I see that it is not possible either.

[jpklzm]

I am having the same problem with Next; there is not a way to stop the flipping. Any news on this?