Re-rendering HTMLFlipBook based on width

[stevonjugush]

Hello, Am unable to re-render the HTMLFlipBook dynamically. I want to change width based on zoom. However when I do that the original width passed remains as it were. `<HTMLFlipBook size="fixed" width={width} height={height} minWidth={315} minHeight={407.61} flippingTime={700} onFlip={onFlip} ref={flipBook} useMouseEvents={false} showCover usePortrait={false} mobileScrollSupport={false}

`

[agent47-jk]

I have similar issue, is there any solution for this.

tried to update width when resize, but app throw error when resize.

 useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.addEventListener("resize", handleResize);
    }
  }, []);

 const handleResize = (e) => {
  setWindowWith(window.innerWidth);
 }; 

tried to update width when resize, but app throw error when resize.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. The above error occurred in the component:

Is there any solution for this issue. I had followed the advance example way.

[kawsar130]

I am having the same issue. Still could not find a solution.

[kawsar130]

Finally, I could manage to get the solution with a different approach. I just added a "key" property on the component and made the "key" value a rendering dependency. As we know, react rerenders the component and gets the initial props value when the "key" value changes. So, when the "key" value changes by an event, the component rerenders and gets the desired width dynamically after rendering. In your case, just put the "width" value as the "key" value. When the width changes, your "key" value will be changed that will force it to rerender.

Here is my sample code,

<HTMLFlipBook
          key={itemPerPage}
          width={width >= 640 ? 288 : width / 2 - 5} 
          height={width >= 640 ? 645 : menuBookHeightForMobile_final}
>

<Pages1 />
<Pages2 />
<Pages3 />

</HTMLFlipBook>

Thank you.

[Blankeos]

I just added a "key" property on the component and made the "key" value a rendering dependency. As we know, react rerenders the component and gets the initial props value when the "key" value changes. So, when the "key" value changes by an event, the component rerenders and gets the desired width dynamically after rendering.

Awesome! Thanks for this. Adding key={width} definitely works for me.

          <HTMLFlipBook
            key={`${width}-${height}`}
            width={width!}
            height={height!}
            size="stretch"
            maxShadowOpacity={0.2}
            showCover
            onFlip={onPageFlip}
          >
            {renderedPages}
          </HTMLFlipBook>

[kawsar130]

I just added a "key" property on the component and made the "key" value a rendering dependency. As we know, react rerenders the component and gets the initial props value when the "key" value changes. So, when the "key" value changes by an event, the component rerenders and gets the desired width dynamically after rendering.

Awesome! Thanks for this. Adding key={width} definitely works for me.

          <HTMLFlipBook
            key={`${width}-${height}`}
            width={width!}
            height={height!}
            size="stretch"
            maxShadowOpacity={0.2}
            showCover
            onFlip={onPageFlip}
          >
            {renderedPages}
          </HTMLFlipBook>

You are most welcome 🤗