react-div-100vh - GitLite

KO | EN

gitlite — search

#ai #typescript #llm #go #android #rust #macos #awesome #kubernetes #awesome-list #pytorch #security #ios #open-source

react-div-100vh

(★ 1,061)

A workaround for the '100vh' issue in mobile browsers

파일 탐색기

최종 버전 다운로드 (.zip)

- - codeql-analysis.yml
  - main.yml
- settings.json
- browser-stack.svg
- react-div-100vh.png
- regular-div.png
- - .npmignore
  - package.json
  - README.md
  - tsconfig-cjs.json
  - tsconfig-esm.json
  - tsconfig-types.json
  - tsconfig.json
- - .gitignore
  - index.html
- - demo.tsx
  - index.html
  - index.tsx
  - package.json
.eslintrc.json
.gitignore
.jestrc.json
.nvmrc
.prettierignore
.prettierrc
CHANGELOG.md
CODE_OF_CONDUCT.md
develpment.md
LICENSE
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/mvasin/react-div-100vh

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-div-100vh

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# `Div100vh` React component and `use100vh` React hook

[![npm
version](https://badge.fury.io/js/react-div-100vh.svg)](https://badge.fury.io/js/react-div-100vh)

This is a workaround for iOS Safari and other mobile browsers.

## The problem

In mobile browsers, the _real_ height of the viewport is dynamic, as browser
"chrome" (panels) slide away on scrolling. The browser developers faced two
choices: either to reflow the page as the pixel value of a `vh` changes, or
ignore the fact that the browser panel covers part of the screen.

The browser panels are supposed to slide away smoothly, and because the layout
reflow during scrolling will not look smooth, the browser developers went for
the second option.

It may work for the most of use cases, but if you're looking for an app-like
full-screen experience, or want to make sure that the call to action button at
the bottom of your splash screen isn't covered, you may need to know the fair
value of a `vh`.

| `<div style={{height: '100vh'}}>`                                                                                               | `<Div100vh>`                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| ![Page cropped by bottom Safari chrome](https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/regular-div.png) | ![Page cropped by bottom Safari chrome](https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/react-div-100vh.png) |

More on this issue
[here](https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html).

## The solution

`Div100vh` React component is the default export:

```jsx
import Div100vh from 'react-div-100vh'

const MyFullHeightComponent = () => (
  <Div100vh>
    <marquee>Look ma, no crop!</marquee>
  </Div100vh>
)
```

For more advanced use cases (for instance, if you need 50% of the real height),
there is a named export `use100vh`. This React hook provides an accurate
vertical height in pixels. The return type is a `number` in a browser and `null`
in Node environment. You may need to check if it's not `null` if you're doing
SSR, otherwise, manipulate the value as you wish and concatenate the result with
`px`:

```jsx
import { use100vh } from 'react-div-100vh'

const MyHalfHeightExampleComponent = ({ children }) => {
  const height = use100vh()
  const halfHeight = height ? height / 2 : '50vh'
  return <div style={{ height: halfHeight }}>{children}</div>
}
```

Under the hood `use100vh` uses `measureHeight` function which is exported as
well, so feel free to use it, even without React. Currently it returns
`window.innerHeight` in a browser and `null` in Node.

## Testing

This component is tested with <a href="https://www.browserstack.com"><img
title="BrowserStack" alt="BrowserStack Logo" height="40"
src="https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/browser-stack.svg"></a>.