What is the best way to adjust the width and height of react-flip-page through CSS for different media queries?

Incorporating the react-flip-page npm package to add animation to a book on my web application has been exciting. However, I've encountered an issue with adjusting the width when using media queries due to the available props for setting size and color of the page.

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

Despite trying to assign a className, the width and height of the component stubbornly remain at 500px. This poses a challenge when attempting to adjust these dimensions for mobile screens, for instance.

If anyone can offer guidance on this matter, it would be greatly appreciated.

cssreactjsnpmmedia-queries

Answer №1

I have discovered a clever solution to modify it by incorporating a state value as the width of the component and then adjusting the width based on the window.innerWidth condition:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with React Router 4.x - PrivateRoute not functioning correctly post integration with Redux

There seems to be an issue with the PrivateRoute from the Example available at https://reacttraining.com/react-router/web/example/auth-workflow. It stops working after being connected with Redux. My version of PrivateRoute is almost identical to the origi ...

reactjsreduxreact-router-reduxreact-router-v4react-router-dom

An expected expression was encountered near the if condition

I am encountering an expression expected error in Visual Studio near if(isNullOr ........ if (value) { if (isNullOrUndefined(x.value) && isNullOrUndefined(x.value2)) { x.minMark + '-' + a + '*' + x.b + ' ' + ...

javascriptreactjs

To begin, formulating a blank state entity containing a collection of key-value pairs with JSON objects as the values. Subsequently, modifying the contents of

I am working on setting up a reactJS state with an empty array to start. When I receive a message in the form of a JSON object, I want to add a key-value pair to the array, using the received message as the value and a specified key. For example: We have ...

javascriptjsonreactjs

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

javascriptcssyoutubeyoutube-api

What is the best way to trigger a jQuery animation when a section becomes visible using Fullpage.js?

Within my website, I've incorporated Fullpage.js and am interested in triggering jQuery animate functions as users scroll to specific sections. Although I tested methods like mouseenter, mouseover, and mouseleave from the prior section, they did not d ...

jqueryhtmlcssfullpage.js

The mark-compacts were unsuccessful due to reaching the heap limit, resulting in an allocation failure - the JavaScript heap ran out of memory during deployment

Whenever I try to deploy in npm, I encounter error code 134 along with a fatal error message: "Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory." I've set NODE_OPTIONS --max_old_space_size=2048, and also tr ...

asp.netvue.jsnpmdeployment

Scrolling horizontally through content of unspecified width

Imagine having a content div displaying a long line of text. I want this content to be enclosed within a wrapper div that has a fixed height and the ability to horizontally scroll if the content exceeds the width of the wrapper div. Here are two possible ...

htmlcss

What is the best way to update multiple values within an Immutable Js Map in Redux?

I am attempting to modify two values (width and x) inside items -> yrgroih9 as shown below: { appElements: { layers: { layer_1: { background: { width: '100px', height: '100px', bgCol ...

reactjsreduxupdatesimmutable.js

Does anyone know if it's achievable to include a background position within the img /asp:image tag?

Currently, I am endeavoring to enhance the loading speed of my webpage. The initial approach I decided to pursue is base64 conversion. On my homepage, there are a total of 18 small images that need to be loaded. Since base64 encoding increases image size ...

c#htmlcssasp.netimage

Tips for Organizing an Array: Grouping Categories and Products

I have a single array and I am looking to separate categories from the products listed within it. const product = [{ id: 1, name: 'Cloth', cat: ['fashion', 'man', 'women'] }, { id: 2, name: &apos ...

javascriptjavaarraysreactjs

Cannot access mobile navigation due to expanded browser search bar

Greetings, all! Currently, as I am in the process of developing a website for my company, I have encountered an issue with the navigation menu, specifically on mobile devices, or more accurately, mobile browsers(most of them). The hamburger icon seems to ...

htmlcssbrowsernavigationbarhamburger-menu

When Node.js calls Python3, it is unable to write to a file

I operate with Node and Python3 on my server-side setup. Essentially, Node, as the backend, receives input data from the frontend and triggers Python to execute a set of tasks. Everything works flawlessly in sequence except for writing to the file ("backUp ...

pythonnode.jsreactjs

Styles are absent from the NextJS 13.4 App Router Middleware Page Redirect feature

Currently, I have implemented middleware that redirects users if they are not on the sign-in screen. This is only a test scenario, and in the future, it will check for a valid authentication session before redirecting. However, after the redirect, the pag ...

reactjshttp-redirectnext.jsmiddleware

Troubleshooting tips for resolving a 403 error during npm installation

Whenever I try to run npm install gulp from the cmd, I keep encountering this error message. https://i.stack.imgur.com/cJuAz.png ...

node.jsnpmgulpnode-modulesnpm-install

Can we create a dynamic _document.tsx file in NextJS?

I'm currently working with React and NextJS. I am looking for a way to dynamically change the favicon on the browser tabs depending on whether the user has set their browser to dark or light mode. Is there any way to achieve this? _document.tsx: clas ...

reactjsnext.js

Designing php/mysql data in a container

After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...

phphtmlcssarrays

You must have a crucial dependency for Create React App called "babel-loader": "8.1.0" installed

It seems like there may be an issue with the project dependency tree. This is most likely not a bug caused by Create React App, but something that needs to be addressed locally. The react-scripts package provided by Create React App requires a dependency: ...

reactjsbabel-loader

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

htmlcsstwitter-bootstrap

How to input a file in a form using React

I am trying to use an API to upload a file, but my formData() function is not returning anything. var formData = new FormData(); data.append("file", file[0]); const options = { method: 'POST', headers: {...}, body: formData } fet ...

javascriptreactjsformsapifile

Stop the spread - Touch to choose - React with Material Design

I am currently utilizing ReactJS along with the library @material-ui/core. In my code, I am seeking to halt event propagation on Click. Here is the snippet: <NumPad.Number onChange={val => { this.setPrice(val) } }> <TextField ...

javascriptreactjsmaterial-ui