media-query-react

Information

media-query-react is package for React to handle media query for the responsive design.

Hooks supported Easiest module to render componenets with media query.

Installation

$npm install --save media-query-react

Import

import MediaQueryReact, { ForDevice, useMediaQuery } from 'media-query-react';

Example

With Components

Wrap application with MediaQueryReact HOC

import React from 'react';
import MediaQueryReact from 'media-query-react';
 
// Entry point
function App() {
 
  // pass screenSize object with custom device name and width.
  const screenSize = {
    mobile: { // custom device name
      minWidth: 320,
      maxWidth: 480,
    },
    mobileLandscape: {
      minWidth: 481,
      maxWidth: 767,
    },
    tablet: {
      minWidth: 768,
      maxWidth: 1024,
    },
    desktop: {
      minWidth: 1025,
      maxWidth: 2500,
    },
  };
 
  return (
    <CtxApp>
    {/* Wrap application with MediaQueryReact HOC and pass prop mediaQuaries */}
      <MediaQueryReact mediaQueries={screenSize}>
        <Routes />
      </MediaQueryReact>
    </CtxApp>
  );
}
 
export default hot(module)(App);
 

use ForDevice to wrap your component which need to be responsive design and to pass your customize device name from screenSize object.

 
import React from 'react';
import { ForDevice } from 'media-query-react';
 
function HeroSideBarHeader({ children }) {
  return (
    <Div>
      {/* Pass custom device name as an array for multiple devices */}
      <ForDevice deviceName={['tablet', 'desktop']}>
        <Header /> {/* <Header /> component will display only on tablet and desktop */}
      </ForDevice>
      {/* Pass custom device name as an string for single device */}
      <ForDevice deviceName="mobile">
        <Sidebar /> {/* <Sidebar /> component will display only on mobile */}
      </ForDevice>
      { children }
    </Div>
  );
}
 
HeroSideBarHeader.propTypes = {
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
};
 
export default withRouter(HeroSideBarHeader);
 

With Hooks

With hooks for now support two css property *max-width *min-width

More css property will come in future update.

import React, { useEffect, useState } from 'react';
import { useMediaQuery } from 'media-query-react';
 
function Header() {
  const isDesktop = useMediaQuery({ query: 'min-width: 1024px' });
  const isTablet = useMediaQuery({ query: 'max-width: 1224px' });
 
  return (
    <Div className={`HeaderHeroContainer ${bgClass}`}>
      <ListUl>
        {
          isDesktop && (
            <ListLi className="contactButtonContainer">
              <a href="mailto:[e-mail]">
                <Span>
                  Contact
                </Span>
              </a>
            </ListLi>
          )
        }
        {
          isTablet && <ListLi><NavLink to="/about">About</NavLink></ListLi>
        }
        <ListLi><NavLink to="/about">Work</NavLink></ListLi>
      </ListUl>
    </Div>
  );
}
 
export default Header;

API

In screenSize object numbers given as shorthand will be expanded to px (768 will become '768px').

With hooks possible CSS properties

Css property	value
max-width	1224px
min-width	1024px

More properties will add in future release.

PROPS

prop	description	type
mediaQueries	custom screen size and deivce name	object
deviceName	Pass screen name to render component	Array or String

LICENSE

MIT

AUTHOR

[e-mail]