Disable page flip on click for custom pages about react-pageflip HOT 5 OPEN

I found the solution bro:

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

from react-pageflip.

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

from react-pageflip.

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 :(

from react-pageflip.

@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}`} />
)
}

from react-pageflip.

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>

from react-pageflip.