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