2021-04-13
1082
#react
Jefferson Ighalo
42015
Apr 13, 2021 ⋅ 3 min read

Using react-responsive to implement responsive design

Jefferson Ighalo I stand at the intersection of beautiful design, secure frontend applications, and fintech at scale. Lover of JavaScript; flirting with Java, Go, and Swift.

Recent posts:

Implementing Infinite Scroll In Next Js With Server Actions

Implementing infinite scroll in Next.js with Server Actions

Infinite scrolling in Next.js no longer requires external libraries — Server Actions let us fetch initial data directly on the server.

Rahul Chhodde
Apr 19, 2024 ⋅ 10 min read
Integrating Django Templates With React For Dynamic Webpages

Integrating Django templates with React for dynamic webpages

Create a dynamic demo blog site using Django and React to demonstrate Django’s server-side functionalities and React’s interactive UI.

Kayode Adeniyi
Apr 18, 2024 ⋅ 7 min read
Using Aoi Js To Build A Bot For Discord

Using aoi.js to build a bot on Discord

Explore how the aoi.js library makes it easy to create Discord bots with useful functionalities for frontend applications.

Rahul Padalkar
Apr 17, 2024 ⋅ 9 min read
Web Components Adoption Guide: Overview, Examples, And Alternatives

Web Components adoption guide: Overview, examples, and alternatives

Evaluate Web Components, a set of standards that allow you to create custom HTML tags for more reusable, manageable code.

Elijah Asaolu
Apr 16, 2024 ⋅ 11 min read
View all posts

One Reply to "Using react-responsive to implement responsive design"

  1. Good article. However, this doesn’t adhere to the principle of DRY (Do not Repeat Yourself). Creating a separate component for each viewport is far from ideal and doesn’t scale well. Consider using only one component and one stylesheet that contains each viewport’s styles nested under the corresponding media query. The mobile styles should be applied first and progressively overwritten by the styles for larger viewports because those devices are typically more powerful. If it’s very important for you not to load unnecessary styles then you can dynamically import the correct stylesheet based on the viewport into one component.

Leave a Reply