how can I modify react-flip-page width and height using css for media queries?

Question

I'm using react-flip-page npm package to animate a book in my web application. However, the component comes with some available props to set size, color, etc of the page, but the issue with this is that I do not know how to change/modify width when setting my media queries.

<FlipPage
      uncutPages="true"
      showSwipeHint="true"
      pageBackground="rgb(230, 216, 95)"
      className="flipPageComponent"
      width="500"
      height="500"
      orientation="horizontal"
    >
      {pagesList}
</FlipPage> 

So I want to change width and height when the component is viewed in a mobile screen for example. I've tried giving it a className, but the width and height stay the same (500px)

Any help is appreciated.

Answer 1

I found a way to change it by adding a state value as the width of the component and then based on the window.innerWidth condition I set the width to the number I wanted:

const [flipPageWidth, setFlipPageWidth] = useState("");

    useEffect(() => {
    if (window.innerWidth > 1450) {
                    setFlipPageWidth("500");
                } else {
                    setFlipPageWidth("200");
                }
    }, []);

    <FlipPage
       uncutPages="true"
       showSwipeHint="true"
       pageBackground="rgb(230, 216, 95)"
       className="flipPageComponent"
       width={flipPageWidth}
       height="500"
       orientation="horizontal"
     >
       {pagesList}
    </FlipPage>