[React] React responsive

반응형에 따라 component를 숨겼다 나타나게 해야할때가 있다.

그때는 responsive를 사용하면 된다.

Install

$ npm install react-responsive --save

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
    {isBigScreen && <p>You  have a huge screen</p>}
    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
    {isRetina && <p>You are retina</p>}
  </div>
}

 

export default function base () {
	const isWide = useMediaQuery('(min-width: 376px)');

	return (
            <>
                {isWide && <CommonHeader>}
            </>
    )
}

CommonHeader가 true일때 (즉, 376px보다 클때 CommonHeader 실행)

 

 

---

[참고자료]

https://www.npmjs.com/package/react-responsive

react-responsive

자바스크립트 논리연산자

논리 연산자