├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── css │ └── index.css └── index.tsx ├── react-vh.code-workspace ├── rollup.config.js ├── src ├── debounce.ts ├── index.ts └── isMobile.ts ├── tsconfig.json ├── tsconfig.rollup.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: "react-app", 3 | rules: { 4 | quotes: ["error", "double"], 5 | semi: ["error", "always"], 6 | indent: ["error", 2], 7 | "no-multiple-empty-lines": ["error"], 8 | "jsx-a11y/anchor-is-valid": 0, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | __assets 2 | /dist 3 | 4 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 5 | 6 | # dependencies 7 | /node_modules 8 | /.pnp 9 | .pnp.js 10 | 11 | # testing 12 | /coverage 13 | 14 | # next.js 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | /build 20 | 21 | # misc 22 | .DS_Store 23 | .env* 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #### 1.1.1 (2021-08-12) 2 | 3 | ##### Bug Fixes 4 | 5 | * fix maxWidth (7cf94126) 6 | 7 | ### 1.1.0 (2021-08-12) 8 | 9 | ##### New Features 10 | 11 | * add vw and maxWidth (4c5a7e02) 12 | 13 | ## 1.0.0 (2021-02-02) 14 | 15 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021-present Andreas Faust 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-vh 2 | 3 | **react-vh** normalizes the CSS-unit `vh`. It sets a global CSS-variable with the current `pixel`-number of 1vh based on `window.innerHeight`. 4 | 5 | [![NPM](https://img.shields.io/npm/v/react-vh.svg)](https://www.npmjs.com/package/react-vh) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) 6 | 7 | - Works on mobile- and desktop-devices 8 | - Very small (around 1 KB unzipped) 9 | - Written in Typescript 10 | 11 | (Mobile-)Browsers implement the `vh`-unit differently. To avoid layout-inconsistencies and janks, this `hook` provides a normalized value for `vh` stored in a [global CSS-variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). 12 | 13 | --- 14 | 15 | For a detailed explanation check out this article: 16 | https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#article-header-id-0 17 | 18 | --- 19 | 20 | ## PeerDependencies 21 | 22 | - react: >= 16.8.0, 23 | - react-dom: >= 16.8.0, 24 | 25 | --- 26 | 27 | ## Install 28 | 29 | Install all dependencies via `yarn` or `npm`. 30 | 31 | ```bash 32 | yarn add react-vh react react-dom 33 | ``` 34 | 35 | --- 36 | 37 | ## Usage 38 | 39 | Place the hook in a component, the higher in the component-tree the better. 40 | 41 | ```jsx 42 | import React from "react"; 43 | import useVH from "react-vh"; 44 | 45 | const MyComponent: React.FC = () => { 46 | useVH(); 47 | return ( 48 |
49 |

This is a Test!

50 |
51 | ); 52 | }; 53 | 54 | export default MyComponent; 55 | ``` 56 | 57 | Then use it in your CSS by using `calc` and multiply by your desired percent-number. `1vh` is the (optional) fallback. 58 | 59 | ```css 60 | .example-wrapper-of-100-vh { 61 | height: calc(var(--vh, 1vh) * 100); 62 | } 63 | .example-wrapper-of-50-vh { 64 | height: calc(var(--vh, 1vh) * 50); 65 | } 66 | ``` 67 | 68 | Same procedure also works for `vw`: 69 | 70 | ```css 71 | .example-wrapper-of-100-vw { 72 | height: calc(var(--vw, 1vw) * 100); 73 | } 74 | .example-wrapper-of-50-vw { 75 | height: calc(var(--vw, 1vw) * 50); 76 | } 77 | ``` 78 | 79 | ### --vh-total 80 | 81 | If you want to use the complete viewport-size (browser-bar included), take `--vh-total`, which depends on `window.outerHeight`. 82 | 83 | ```css 84 | .example-wrapper-of-99-total-viewport-height { 85 | height: calc(var(--vh-total, 1vh) * 99); 86 | } 87 | ``` 88 | 89 | ### maxWidth 90 | 91 | If the width of your Layout is limited to a `max-width` and you can also limit the `vw`-value to a value, by passing an object with key `maxWidth` to `useVH`: 92 | 93 | ```jsx 94 | const MyComponent: React.FC = () => { 95 | useVH({ maxWidth: 2400 }); 96 | return ( 97 |
98 |

This is a Test!

99 |
100 | ); 101 | }; 102 | ``` 103 | 104 | ## What it does and how it works 105 | 106 | `react-vh` adds two root CSS-variables to the `html`-tag and updates it on `viewport-resize` on desktop- or `orientation-change` on mobile-devices. 107 | It differs mobile and desktop by checking the media-query `pointer: coarse`, which is not supported by [older browsers](https://caniuse.com/css-media-interaction). _Checks like this are not completely reliable, so please report an issue, if you experience bugs._ 108 | 109 | ```html 110 | 111 | 112 | Test 113 | 114 | 115 | 116 | ``` 117 | 118 | --- 119 | 120 | ## Contributing 121 | 122 | Every contribution is very much appreciated. 123 | 124 | **If you like `react-vh`, don't hesitate to star it on [GitHub](https://github.com/AndreasFaust/react-vh).** 125 | 126 | --- 127 | 128 | ## License 129 | 130 | Licensed under the MIT License, Copyright © 2021-present Andreas Faust. 131 | 132 | See [LICENSE](LICENSE.md) for more information. 133 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const isProduction = process.env.NODE_ENV === "production"; 2 | const productionPath = "/react-vh"; 3 | 4 | module.exports = { 5 | basePath: isProduction ? productionPath : "", 6 | env: { 7 | productionPath: isProduction ? productionPath + "/" : "", 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-vh", 3 | "version": "1.1.1", 4 | "description": "Save correct vh in root-variable and use it in CSS.", 5 | "author": "AndreasFaust", 6 | "license": "MIT", 7 | "repository": "AndreasFaust/react-vh", 8 | "main": "dist/index.js", 9 | "module": "dist/index.es.js", 10 | "jsnext:main": "dist/index.es.js", 11 | "types": "./dist/index.d.ts", 12 | "files": [ 13 | "/dist" 14 | ], 15 | "engines": { 16 | "node": ">=8", 17 | "npm": ">=5" 18 | }, 19 | "dependencies": {}, 20 | "devDependencies": { 21 | "@rollup/plugin-commonjs": "^17.0.0", 22 | "@rollup/plugin-node-resolve": "^11.1.0", 23 | "@rollup/plugin-url": "^6.0.0", 24 | "@types/node": "^14.14.21", 25 | "@types/react": "^17.0.0", 26 | "@types/resize-observer-browser": "^0.1.5", 27 | "@typescript-eslint/eslint-plugin": "4.13.0", 28 | "@typescript-eslint/parser": "4.13.0", 29 | "babel-eslint": "^10.1.0", 30 | "eslint": "7.18.0", 31 | "eslint-config-react-app": "^6.0.0", 32 | "eslint-plugin-flowtype": "5.2.0", 33 | "eslint-plugin-import": "2.22.1", 34 | "eslint-plugin-jsx-a11y": "6.4.1", 35 | "eslint-plugin-react": "7.22.0", 36 | "eslint-plugin-react-hooks": "4.2.0", 37 | "generate-changelog": "^1.8.0", 38 | "gh-pages": "^3.1.0", 39 | "next": "10.0.5", 40 | "react": "17.0.1", 41 | "react-dom": "^17.0.1", 42 | "rollup": "^2.36.2", 43 | "rollup-plugin-css-only": "^3.1.0", 44 | "rollup-plugin-peer-deps-external": "^2.2.4", 45 | "rollup-plugin-typescript2": "^0.29.0", 46 | "styled-components": "^5.2.1", 47 | "typescript": "^4.1.3" 48 | }, 49 | "peerDependencies": { 50 | "react": ">=16.8.0", 51 | "react-dom": ">=16.8.0" 52 | }, 53 | "keywords": [ 54 | "React", 55 | "vh", 56 | "VH", 57 | "CSS vh unit", 58 | "Hook", 59 | "normalize", 60 | "correct" 61 | ], 62 | "scripts": { 63 | "dev": "next dev", 64 | "start": "yarn dev", 65 | "build": "rollup -c", 66 | "release:major": "yarn build && git add . && changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags && npm publish", 67 | "release:minor": "yarn build && git add . && changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags && npm publish", 68 | "release:patch": "yarn build && git add . && changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags && npm publish", 69 | "release:dev": "yarn build && git add . && git commit -m 'Do Beta-Release' && git push origin && git push origin --tags && npm version 6.0.0-next.0 && npm publish --tag next", 70 | "deploy": "yarn next build && yarn next export && touch out/.nojekyll && gh-pages -t -d out" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./css/index.css"; 3 | 4 | function MyApp({ Component, pageProps, router }) { 5 | return ; 6 | } 7 | 8 | export default MyApp; 9 | -------------------------------------------------------------------------------- /pages/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | h1 { 5 | margin: 0; 6 | background: yellow; 7 | height: calc(var(--vh, 1vh) * 100); 8 | } 9 | h2 { 10 | margin: 0; 11 | height: calc(var(--vh, 1vh) * 50); 12 | } 13 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NextPage } from "next"; 3 | import useVH from "../src"; 4 | 5 | interface Props {} 6 | 7 | const Startpage: NextPage = (props) => { 8 | useVH(); 9 | return ( 10 |
11 |

This is 100vh

12 |

This is 50vh

13 |

This is 50vh

14 |
15 | ); 16 | }; 17 | 18 | export default Startpage; 19 | -------------------------------------------------------------------------------- /react-vh.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | } 6 | ], 7 | "settings": { 8 | "editor.defaultFormatter": "esbenp.prettier-vscode", 9 | "editor.formatOnSave": true, 10 | "search.exclude": { 11 | "**/node_modules": true, 12 | "**/dist": true 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from "rollup-plugin-typescript2"; 2 | import css from "rollup-plugin-css-only"; 3 | import commonjs from "@rollup/plugin-commonjs"; 4 | import resolve from "@rollup/plugin-node-resolve"; 5 | import external from "rollup-plugin-peer-deps-external"; 6 | 7 | import pkg from "./package.json"; 8 | 9 | export default { 10 | input: "src/index.ts", 11 | output: [ 12 | { 13 | file: pkg.main, 14 | format: "cjs", 15 | exports: "named", 16 | sourcemap: true, 17 | }, 18 | { 19 | file: pkg.module, 20 | format: "es", 21 | exports: "named", 22 | sourcemap: true, 23 | }, 24 | ], 25 | plugins: [ 26 | external(), 27 | resolve({ 28 | browser: true, 29 | }), 30 | typescript({ 31 | tsconfig: "tsconfig.rollup.json", 32 | rollupCommonJSResolveHack: true, 33 | exclude: "**/__tests__/**", 34 | clean: true, 35 | }), 36 | commonjs({ 37 | include: ["node_modules/**"], 38 | exclude: ["**/*.stories.js"], 39 | // namedExports: { 40 | // "node_modules/react/react.js": [ 41 | // "Children", 42 | // "Component", 43 | // "PropTypes", 44 | // "createElement", 45 | // ], 46 | // "node_modules/react-dom/index.js": ["render"], 47 | // }, 48 | }), 49 | css({ output: "./dist/main.css" }), 50 | ], 51 | external: ["styled-components"], 52 | }; 53 | -------------------------------------------------------------------------------- /src/debounce.ts: -------------------------------------------------------------------------------- 1 | export default function debounce(callback: () => void, delay: number) { 2 | let timeout: ReturnType; 3 | return function () { 4 | clearTimeout(timeout); 5 | timeout = setTimeout(callback, delay); 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import isMobile from "./isMobile"; 3 | import debounce from "./debounce"; 4 | 5 | interface Props { 6 | maxWidth?: number; 7 | } 8 | 9 | export function useVH({ maxWidth }: Props = {}) { 10 | React.useEffect(() => { 11 | function setVH() { 12 | const { innerWidth, innerHeight, outerHeight } = window; 13 | 14 | document.documentElement.style.setProperty( 15 | "--vh", 16 | innerHeight * 0.01 + "px" 17 | ); 18 | 19 | document.documentElement.style.setProperty( 20 | "--vh-total", 21 | outerHeight * 0.01 + "px" 22 | ); 23 | 24 | const width = maxWidth && innerWidth > maxWidth ? maxWidth : innerWidth; 25 | document.documentElement.style.setProperty("--vw", width * 0.01 + "px"); 26 | } 27 | 28 | const deviceIsMobile = isMobile(); 29 | const dSetVH = debounce(setVH, 150); 30 | setVH(); 31 | 32 | if (deviceIsMobile) { 33 | window.addEventListener("orientationchange", dSetVH); 34 | } else { 35 | window.addEventListener("resize", dSetVH); 36 | } 37 | return () => { 38 | if (deviceIsMobile) { 39 | window.removeEventListener("orientationchange", dSetVH); 40 | } else { 41 | window.removeEventListener("resize", dSetVH); 42 | } 43 | }; 44 | }, [maxWidth]); 45 | } 46 | 47 | export default useVH; 48 | -------------------------------------------------------------------------------- /src/isMobile.ts: -------------------------------------------------------------------------------- 1 | export default function isMobile(): boolean { 2 | const match = window.matchMedia("(pointer:coarse)"); 3 | return match && match.matches; 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": false, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve" 20 | }, 21 | "exclude": [ 22 | "node_modules" 23 | ], 24 | "include": [ 25 | "next-env.d.ts", 26 | "**/*.ts", 27 | "**/*.tsx", "grid/Box/index.js", "grid/Grid/index.jsx" 28 | ] 29 | } -------------------------------------------------------------------------------- /tsconfig.rollup.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom", "es2016", "es2017"], 7 | "sourceMap": true, 8 | "allowJs": false, 9 | "jsx": "react", 10 | "declaration": true, 11 | "moduleResolution": "node", 12 | "allowSyntheticDefaultImports": true, 13 | "esModuleInterop": true 14 | }, 15 | "include": ["src/**/*"], 16 | "exclude": ["node_modules", "dist"] 17 | } 18 | --------------------------------------------------------------------------------