React component that helps to render different layouts on different devices and viewport sizes


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
42May 6, 2021Mar 19, 2018Minified + gzip package size for @dailybeast/react-media-query in KB



npm Version License

MediaQuery is a React component that helps to render different layouts on different devices and viewport sizes.


npm i @dailybeast/react-media-query --save


Let's say you have a DesktopComponent you need to render only on desktop viewport size and you have also a MobileComponent - only for mobile/tablet viewport sizes. All you need to do - wrap these components in MediaQuery and specify the breakpoints via the 'breakpoints' prop.

import MediaQuery, { BREAKPOINT } from '@dailybeast/react-media-query';
import DesktopComponent from './DesktopComponent';
import MobileComponent from './MobileComponent';

export default function Page() {
  return (
    <div className="Page">
      <MediaQuery breakpoints={[BREAKPOINT.DESKTOP]}>
        <DesktopComponent />
      <MediaQuery breakpoints={[BREAKPOINT.TABLET, BREAKPOINT.MOBILE]}>
        <MobileComponent />

Available props

propTypes = {
  // array of breakpoints when the `children` will be rendered
  breakpoints: PropTypes.arrayOf(PropTypes.string),
  // current device type you detected on server (from Request object)
  // it's optional and should be used only when you use server-rendering
  guessedBreakpoint: PropTypes.string,
  // array of additional media queries
  queries: PropTypes.arrayOf(PropTypes.shape({
    minWidth: PropTypes.number,
    maxWidth: PropTypes.number,
    maxDeviceWidth: PropTypes.number,
    maxDeviceHeight: PropTypes.number,
  // something you want to render
  children: PropTypes.oneOfType([
  // if you want to render 'children' inside of a wrapper-element you can specify it via 'wrapper' prop
  wrapper: PropTypes.string,

Available breakpoints (device types)

export const BREAKPOINT = {
  DESKTOP: 'desktop',
  TABLET: 'tablet',
  MOBILE: 'mobile',
  MOBILE_LANDSCAPE: 'mobileLandscape',

Using queries

Default breakpoints use following default queries:

export const QUERY = {
    minWidth: 1032,
    minWidth: 704,
    maxWidth: 1031,
    maxWidth: 703,
    landscape: true,
    maxDeviceHeight: 703,

If you want to specify some other breakpoints, you should use 'queries' prop:

    { minWidth: 380, maxWidth: 1000 },
    { landscape: true }
  This text will be rendered only when the viewport width is >= 300px AND <= 1000, OR device is in landscape mode.

Using wrappers

When rendered you 'children' can be wrapped into a specified html tag:

  This text will be rendered inside of 'span' when the viewport width matches 'desktop'

Made by The Daily Beast team

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.