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

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);
 

 
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);
 

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;