티스토리 뷰

자바스크립트(javascript)

[react/javascript] 모바일 orientation (가로/세로) 상태 받아오기

개발자 고포고 2022. 11. 23. 23:43
반응형

[react/javascript] 모바일 orientation (가로/세로) 상태 받아오기

 

#사이트

https://www.npmjs.com/package/react-screen-orientation

 

react-screen-orientation

Display Components based on screen orientation. Latest version: 0.0.4, last published: 3 years ago. Start using react-screen-orientation in your project by running `npm i react-screen-orientation`. There is 1 other project in the npm registry using react-s

www.npmjs.com

 

#설치

npm install react-screen-orientation --save

 

#사용

<DeviceOrientation lockOrientation={'landscape'}>
        <Orientation orientation='landscape' alwaysRender={false}>
          <div>
            <h4>landscape</h4>
          </div>
        </Orientation>
        <Orientation orientation='portrait' alwaysRender={false}>
          <div>
          <h4>portrait</h4>
          </div>
        </Orientation>
      </DeviceOrientation>

 

#결과

 

#orientation #회전 #방향 #모바일 #react #screen #javascript #리액트

반응형
저작자표시

'자바스크립트(javascript)' 카테고리의 다른 글

[react/javascript] 리액트+tailwindcss+twin.macro  (1) 2022.11.30
[react/javascript] 태블릿/모바일 구분하기  (0) 2022.11.24
[react/javascript] 디바이스 / 브라우져 체크하기  (0) 2022.11.23
[react/vscode] Reactjs code snippets 사용법 및 추천  (0) 2022.11.23
[random/js] javascript random 난수 생성하기  (0) 2022.11.03
댓글
반응형