Can I make a React Component Responsive?

JavaScript
1

I have a React component as sidebar and I wonder if I can make it responsive.

That component is a bit of a mess when it comes to styling and changing stuff up is only confusing to me and doesn’t help me to get the desired result.
Can I do so that the component gets smaller whenever I resize the page? With that I mean responsive in different screen sizes.
I’ve been looking into styled-components and find it cool, unfortunately there is no way I can use it with a component.

The basic idea of my web application is that we have a full size iframe and a button on the right corner that once is clicked it opens a sidebar.

Is there any easy way out? Some best practices that would help me get this mess to be less confusing?

Otherwise videos I could watch or tutorials I could get to get my feet on the ground? :fearful::fearful::fearful:

Responsive design is getting harder by the day, especially when I started using React.
I must say that I hate making things responsive, plus I never know how it really looks on different sizes of the screen.

2

One option is to use relative width and length properties for the Sidebar. The most common way to do this is to use vh - viewport height and vw - viewport width, instead of sizing something with px - pixels.

CSS Tricks Example

Basic Example

3

There are several ways to style a React component. If you feel comfortable with CSS, it might be easiest to use a regular stylesheet and include it in your React component. This article gives some good insights on how to do that.

For me, this is an easy way to style React while learning it. Hope this helps, good luck with your project!