Tips for implementing media breakpoints dynamically in styled-components with Typescript and React Hooks

For mobile devices, I needed the height to be greater than the width. To achieve this, I removed the aspectRatio from the index.js file in the handleResize function within the src/camera folder, and surprisingly, it worked. However, I am aware that this might not be the ideal solution. Can anyone provide suggestions on how to address this issue for different media breakpoints?

Here is my sandbox code, borrowed from Andrews James's post: https://blog.logrocket.com/responsive-camera-component-react-hooks/

https://codesandbox.io/s/react-camera-component-s0uqfr

Edit: Specific Problem

const [container, setContainer] = useState({ width: 0, height: 0});
const [aspectRatio, calculateRatio] = useCardRatio(0.586);
function handleResize(contentRect) {
setContainer({
  width: contentRect.bounds.width,
  height: Math.round(contentRect.bounds.width / aspectRatio)
  // height: Math.round(contentRect.bounds.width)
});}

CSS Style:

export const Container = styled.div`
  position: relative;
  width: 100%;
  max-width: ${({ maxWidth }) => maxWidth && `${maxWidth}px`};
  max-height: ${({ maxHeight }) => maxHeight && `${maxHeight}px`};
  overflow: hidden;
`;

Now, the height property remains fixed regardless of the resolution in Chrome DevTools dimensions.

Thank you in advance.

Answer №1

Utilize CSS variables to adjust styling based on breakpoints.

document.style.setProperty("--my-breakpoint", myValue);

Implement the following media query:

@media(max-width: var(--my-breakpoint)) {
    // Customize as needed
}

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

Developing an HTML email editing tool.. Utilizing inherited classes?

Currently, I am in the process of creating a mail editor with a div that is contenteditable. My goal is to be able to switch between HTML and Clear Text easily, as well as utilize a Word style editor for decorations, colors, fonts, and sizes. I AM AVOIDIN ...

Adjusting the margin on an element within a div with display: table-cell can cause the content in another cell

Here is a simple layout that I have: http://jsfiddle.net/656ckfyq/ <div class="container"> <div> Some jumping content here </div> <div> <a href="#" class="more">More</a> ...

Converting CSS into jQuery

I am exploring ways to create a collapsible section with arrow icons (right and down arrows) in jQuery or JavaScript. Can anyone provide guidance on how to convert my CSS styling into jQuery code? Below is the jQuery approach I have attempted: $(document ...

What is the best way to test a function within a connected component in React?

I am currently working with a component that is connected to a store. I need to test a specific function within the React component. How can I access and test this function? For example: var newReactComponent = React.createClass({ functionToBeTested: ...

What is the best way to add a custom color to a blank div that is designed with the Bootstrap grid system?

Let's analyze this scenario <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3"></div> <div class="col-md-6 col-sm-6 col-xs-6"></div> <div class="col-md-3 col-sm-3 col-xs-3"></div> </div& ...

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with transform. export function SlideLeft() { return trigger('slideLeft', [ state('void&a ...

Creating an interactive dropdown menu in react.js

For a project I'm working on, the user can input data that is then sent to a MongoDB instance. There's also a search bar where users can retrieve the data and select a specific ID to view all corresponding document information in text fields. ht ...

Utilizing React to implement a timeout feature for communicating with Firebase

Currently, I am working with React and Firebase, and I need to manage the situation when a call to the database is pending for too long by displaying an error message. Below is my database call: fire.database().ref('user/').once('value&ap ...

What is the correct way to test history.push and history.replace in React applications?

When attempting to test the replace or push functions, I am encountering issues. When using mock, it is not being called at all and results in an empty object representing history. The error message I receive states: "Cannot spy the replace property beca ...

Applying transition effects to elements external to the VueJS transition component

Vue Version 2.6.10 To view the reproduction, please click on the link provided. <router-link to="/a"><a name="/a">[a]</a></router-link> <router-link to="/b"><a name="/b">[b]</a></router-link> <router-lin ...

Ways to remove newly added tasks using JavaScript function?

I have an existing list of li elements in my HTML that can be deleted using JavaScript. However, whenever I add a new li, the delete function no longer works on the newly added item. I suspect the issue lies within the current implementation of the for loo ...

Can't decide between using tabs or back buttons to navigate with react-navigation stack/bottomTab navigator? Here's a step-by

I have developed a unique react native application that currently does not incorporate any form of navigation. However, I am now interested in implementing the powerful functionality offered by react-navigation. Unfortunately, I am encountering difficultie ...

how to implement a progress bar with a percentage indicator using Angular 9

Is there a way to create a progress bar in Angular 9 that updates as an image is selected for upload? I have this code that tracks the upload progress of a file and displays it as a percentage. let elemnt = document.getElementById('progress'); ...

The jest.fn prop is not triggering the mock function as expected

Exploring the select feature of a component, I'm currently testing it using https://www.npmjs.com/package/react-giphy-searchbox This is how I've implemented it: GifSection.tsx import React, { Fragment } from "react"; import ReactGiph ...

Sending a document through the input field with React Hook Form

In my application, I have implemented a file input to submit a file and send it to a firebase storage bucket. To achieve this functionality, I am utilizing the react-hook-form library. However, I encountered an issue - I wanted the file to be uploaded with ...

Flex containers positioned next to each other without overlapping and adjusting in relation to one another

I would like to prevent the lower div (which includes an image and a button) from overlapping with the division above it that contains text. So, when the button encounters this upper division, I want it to move down in a way that pushes the image beneath i ...

Error: Attempting to access property 'getElementById' of an undefined variable is not allowed

I encountered an error when trying to run a code that I didn't create. The error message is as follows: TypeError: Cannot read property 'getElementById' of undefined Module.<anonymous> C:/Users/src/index.js:6 3 | import App from &a ...

"Excessive re-renders caused by the .map function in the webpage

Issue: The tags on the navbar are supposed to remain in place, but when I execute the code, they keep moving - the first tag goes to the second position, the second tag to the third, and this loop continues endlessly. Frontend code (already embedded withi ...

What is the process for making a hover box?

When visiting the website and hovering over the All Services link, a popup overlay with various categories will appear. What is the best way to implement this while also ensuring it remains SEO friendly? Please refer to the attached image for reference: ...

Troubles with NextJS and TailwindCSS Styling

I encountered a strange issue when I used the component separately. Here's how the code looked like: <> <Head> <title>Staycation | Home</title> <meta name="viewport" content="initial- ...