Responsive design with styled-components in React
We are entering some amount of websites on the internet while we are surfing and using our mobile phones, tablets, laptops, desktops, etc. during this surfing. At first, these websites were just suitable for large screens like our desktop monitors. As you know we can not see these types of websites on our small size devices properly and these websites must support small size devices. So, the “Responsive Design” approach emerged.
The Responsive Design ensures that websites are displayed properly on devices of different screen sizes. Today, we are using different responsive design packages like Bootstrap but these packages can be insufficient most of the time and trying to create our responsive design approach.
In this article, I will show you how to create your responsive design approach to get more flexibility.
The responsive design approach leans on the grid structure. This structure divides the screen into grids (Bootstrap is using 12 grids to divide the screen.) and. There are 3 elements in this structure and they are the heart of the grids.
Container: It is the outer element that wraps the whole website page. The size of it is the same as the body element.
Row: It is a row as you know and creates an invisible row on the page.
Column: It is a column as you know and creates an invisible column on the page.
I hope you can understand what is responsive design and how grids work. Now we can jump into the code. I am using React and styled-components and typescript to implement grid structure for the responsive design. styled-components is the most popular styling library for React.
First of all, we need to set screen sizes to implement a responsive design. We can set them like below. You can extend screen size as you wish.
According to screen size with of the element should be calculated. Below function will do the math.
Below we are setting some options that our custom responsive design support.
Now that we make the necessary settings we can start to write 3 important elements of grid structure. You can find code of every element below.
Container:
Container component will wrap whole screen that will be injected into itself and will give full screen size support to the injected component.
Row:
Row creates block element according to Container component.
Column:
Column creates inline element according to Container and Row components.
So far, we wrote grid structure for the responsive design. Now lets see how to use this custom grid structure.
That’s it. We created a custom responsive design structure without using any ui components. It is lightweight, easy to use and highly customizable. You can extend above configurations as you wish in your projects.
