Skip to content

React, how to make responsive JSX

I had the need to make a sidebar look in one particular way when in a big screen in React, and in another way when in a smaller screen, so I wanted to have some way to detect responsive layouts changes in JSX.

Like this:

You can use the react-responsive package to do that.

npm install react-responsive

then you can import the useMediaQuery hook:

import { useMediaQuery } from 'react-responsive'

And in your components you can use it like this:

  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' })
  const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' })

This is a simple example of breakpoints I found on the component's home page, and they worked fine for my needs.

I used it in a layout component in this way:

import { useMediaQuery } from 'react-responsive'

export default function Layout({ children }) {
  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' })
  const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' })

  return (
    <div>
        {isSmallScreen ? (
          <LeftSidebar small={true} />
        ) : (
          <LeftSidebar />
        )}
    </div>
  )
}

I used it to pass a small prop to a LeftSidebar component, so it knew how to render itself.

You can also do things differently and create components to wrap JSX, which I find nicer to see:

import { useMediaQuery } from 'react-responsive'

const BigScreen = ({ children }) => {
  return useMediaQuery({ minWidth: 992 }) ? children : null
}

const SmallScreen = ({ children }) => {
  return useMediaQuery({ maxWidth: 991 }) ? children : null
}

export default function Layout({ children }) {
  return (
      <div>
        <SmallScreen>
          <LeftSidebar small={true} />
        </SmallScreen>
        <BigScreen>
          <LeftSidebar />
        </BigScreen>
      </div>
    </div>
  )
}
→ Download my free React Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about react: