Detecting Breakpoints in React Using Chakra UI

The project I'm currently working on makes heavy use of Chakra UI, an open‑source library of reusable React components built using the Emotion CSS-in-JS library and the styled‑system design system.

It is fair to say that it has been a fairly steep learning curve, but one of the things I've come to be very impressed with is the useBreakpoint hook it exposes. When combined with ThemeProvider, it allows the application to respond and adapt to different screen sizes very easily.

The hook returns a boolean value which indicates whether the current screen size matches a specified breakpoint or not.

To use the useBreakpoint hook, you first need to install the @chakra-ui/react package, after which you can import the hook into your component like this:

import { useBreakpoint } from '@chakra-ui/react'

And use it like this:

const isSmall = useBreakpoint('sm');

The hook accepts a breakpoint argument, which ‑ by default ‑ can be one of the following values: xs, sm, md, lg, xl, or 2xl. By default, these correspond to:

• xs: 0px and up
• sm: 640px and up
• md: 768px and up
• lg: 1024px and up
• xl: 1280px and up
• 2xl: 1536px and up

As the hook returns a simple boolean, you can then chain calls together to create fairly complex conditional rendering logic:

const isSmall = useBreakpoint('sm');const isMedium = useBreakpoint('md');const isLarge = useBreakpoint('lg');if (isSmall) {  return <p>The screen is small!</p>;} else if (isMedium) {  return <p>The screen is medium!</p>;} else if (isLarge) {  return <p>The screen is large!</p>;} else {  return <p>The screen is extra large!</p>;}

Customising the Default Breakpoints

It's also very straightforward to customise the default breakpoints used in the useBreakpoint hook, you can use the theme object provided by the ThemeProvider component from @chakra-ui/react.

For example:

import { ThemeProvider } from '@chakra-ui/react';const theme = {  breakpoints: {    sm: '400px',    md: '600px',    lg: '950px',    xl: '1100px',  },};function App() {  return (    <ThemeProvider {...theme}>      {/* Your application components go here */}    </ThemeProvider>  );}

And that's it! With the useBreakpoint hook, you can easily create responsive layouts in your Chakra UI application by detecting screen sizes and adapting the content accordingly.

Obviously, there are also plenty of other ways to achieve this if you don't happen to have inherited a project that's already using Chakra!

Check the Chakra Version First

This article came from a project that was already using Chakra UI, so the right answer was to use the tools the codebase had standardised on. Before copying the pattern, check the Chakra version in your own project because the responsive hooks and theme setup have changed across major releases.

For simple style changes, CSS‑first responsive props are usually cleaner than branching React logic. Reach for breakpoint‑aware JavaScript only when the component genuinely needs to render different behaviour, data or structure at different sizes.

Server Rendering Caveat

If the app server‑renders, be careful with breakpoint logic that only resolves in the browser. A mismatch between the server output and the first client render can create layout shifts or hydration warnings. Prefer a stable default and then enhance after the breakpoint value is known.