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:itsmohitsaxenahere@gmail.com">
                  <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

More properties will add in future release.

PROPS

LICENSE

MIT

AUTHOR

itsmohitsaxenahere@gmail.com