Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-div-100vh
Advanced tools
react-div-100vh - npm Package Compare versions
Comparing version 0.3.8 to 0.4.0-beta.1
@@ -0,28 +1,42 @@ | ||
| ## 0.4.0 (Aug 9, 2020) | ||
| - [BREAKING CHANGE] `use100vh` React hook was added. It returns height as a `number` in a browser and `undefined` in Node (when server-side rendered). Minimum React version now is "the one with hooks" - 16.8.0 (@mvasin in [29](https://github.com/mvasin/react-div-100vh/pull/xx)) | ||
| - [BREAKING CHANGE] `rvh` units were ditched from `Div100vh` component API, use the `use100vh` hook instead (@mvasin in [29](https://github.com/mvasin/react-div-100vh/pull/xx)) | ||
| ## 0.3.8 (Dec 13, 2019) | ||
| * Revert 0.3.6 and 0.3.7 (@mvasin in [29](https://github.com/mvasin/react-div-100vh/pull/29)) | ||
| - Revert 0.3.6 and 0.3.7 (@mvasin in [29](https://github.com/mvasin/react-div-100vh/pull/29)) | ||
| ## 0.3.7 (Dec 13, 2019) | ||
| * Fix 'error "document" is not available during server side rendering.' (@kyleboss-tinder in [28](https://github.com/mvasin/react-div-100vh/pull/28)) | ||
| - Fix 'error "document" is not available during server side rendering.' (@kyleboss-tinder in [28](https://github.com/mvasin/react-div-100vh/pull/28)) | ||
| ## 0.3.6 (Dec 10, 2019) | ||
| * Apply the styles on the first render (@meyerds in [26](https://github.com/mvasin/react-div-100vh/pull/26)) | ||
| - Apply the styles on the first render (@meyerds in [26](https://github.com/mvasin/react-div-100vh/pull/26)) | ||
| ## 0.3.5 (Dec 8, 2019) | ||
| * Use document.documentElement.clientHeight instead of window.innerHeight (@roman-kaspar in [22](https://github.com/mvasin/react-div-100vh/pull/22)) | ||
| - Use document.documentElement.clientHeight instead of window.innerHeight (@roman-kaspar in [22](https://github.com/mvasin/react-div-100vh/pull/22)) | ||
| ## 0.3.4 (Aug 15, 2019) | ||
| * Add support for nondiv elements (@charlescrtr in [20](https://github.com/mvasin/react-div-100vh/pull/20)) | ||
| - Add support for nondiv elements (@charlescrtr in [20](https://github.com/mvasin/react-div-100vh/pull/20)) | ||
| ## 0.3.3 (Apr 28, 2019) | ||
| * Avoid to use jest-get-type in production (@valse in [7](https://github.com/mvasin/react-div-100vh/pull/7)) | ||
| - Avoid to use jest-get-type in production (@valse in [7](https://github.com/mvasin/react-div-100vh/pull/7)) | ||
| ## 0.3 (Oct 17, 2018) | ||
| * Get rid of unnecessary handling DOM node via `ref`, because props would do just fine | ||
| * Move demo from GitHub Pages to Netlify | ||
| * Improve support for `rvh` units: allow multiple `rvh` entries in a propersty value, allow `rvh` mixed with other values (i.e. `margin: 1px 1rvh`) | ||
| - Get rid of unnecessary handling DOM node via `ref`, because props would do just fine | ||
| - Move demo from GitHub Pages to Netlify | ||
| - Improve support for `rvh` units: allow multiple `rvh` entries in a propersty value, allow `rvh` mixed with other values (i.e. `margin: 1px 1rvh`) | ||
| ## 0.2 (Aug 28, 2018) | ||
| * `rvh`, "real viewport height" unit is introduced. `1rvh` equals to 1/100 of actually visible space (with mobile browser bottom chrome excluded). if implied `height: 100rvh` is not what you want, pass the component a `style` prop and use `rvh` units there anyway you'd like, i.e. `<Div100vh style={{ minHeight: '100rvh' }} />`. If you pass any CSS properties in `rvh` units to `style` prop, default `height: 100rvh` does not apply. (@drd, @joshuarrr and @mvasin in [#2](https://github.com/mvasin/react-div-100vh/pull/2)) | ||
| - `rvh`, "real viewport height" unit is introduced. `1rvh` equals to 1/100 of actually visible space (with mobile browser bottom chrome excluded). if implied `height: 100rvh` is not what you want, pass the component a `style` prop and use `rvh` units there anyway you'd like, i.e. `<Div100vh style={{ minHeight: '100rvh' }} />`. If you pass any CSS properties in `rvh` units to `style` prop, default `height: 100rvh` does not apply. (@drd, @joshuarrr and @mvasin in [#2](https://github.com/mvasin/react-div-100vh/pull/2)) | ||
| ## 0.1.8 (May 28, 2018) | ||
| * Initial release | ||
| - Initial release |
| { | ||
| "name": "react-div-100vh", | ||
| "version": "0.3.8", | ||
| "description": "A React component that aims to solve '100vh' issue in mobile browsers", | ||
| "main": "lib/index.js", | ||
| "version": "0.4.0-beta.1", | ||
| "description": "A workaround for the '100vh' issue in mobile browsers", | ||
| "license": "MIT", | ||
| "main": "dist-lib/index.js", | ||
| "types": "dist-lib/index.d.ts", | ||
| "scripts": { | ||
| "dev": "concurrently \"npm run lib:watch\" \"npm run docs\"", | ||
| "lib": "babel src/lib -d lib --copy-files", | ||
| "lib:watch": "babel src/lib -w -d lib --copy-files", | ||
| "docs": "webpack-dev-server --mode development", | ||
| "docs:prod": "webpack --mode production", | ||
| "test": "jest" | ||
| "test": "ts-node tests/ssr.tsx", | ||
| "dev": "parcel demo/index.html", | ||
| "build-demo": "parcel build --out-dir dist-demo demo/index.html", | ||
| "serve-demo": "npx serve dist-demo", | ||
| "build-lib": "npx tsc -p lib/tsconfig.json", | ||
| "prepublishOnly": "npm run build-lib && npm run build-demo" | ||
| }, | ||
| "keywords": [], | ||
| "license": "MIT", | ||
| "peerDependencies": { | ||
| "react": ">15", | ||
| "react-dom": ">15" | ||
| "react": ">=16.8.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.0.0", | ||
| "@babel/core": "^7.0.0", | ||
| "@babel/plugin-proposal-class-properties": "^7.0.0", | ||
| "@babel/plugin-proposal-object-rest-spread": "^7.0.0", | ||
| "@babel/preset-env": "^7.0.0", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-loader": "^8.0.0", | ||
| "concurrently": "^3.6.1", | ||
| "css-loader": "^3.2.0", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "husky": "^3.1.0", | ||
| "ip": "^1.1.5", | ||
| "jest": "^24.9.0", | ||
| "lint-staged": "^9.5.0", | ||
| "prettier": "^1.19.1", | ||
| "raf": "^3.4.0", | ||
| "react": "^16.4.2", | ||
| "react-dom": "^16.4.2", | ||
| "react-test-renderer": "^16.5.2", | ||
| "style-loader": "^0.21.0", | ||
| "webpack": "^4.17.1", | ||
| "webpack-cli": "^3.3.10", | ||
| "webpack-dev-server": "^3.8.0" | ||
| "@types/node": "^14.6.0", | ||
| "@types/react": "^16.9.46", | ||
| "@types/react-dom": "^16.9.8", | ||
| "parcel-bundler": "^1.12.4", | ||
| "prettier": "^2.0.5", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "ts-node": "^8.10.2", | ||
| "typescript": "^4.0" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "src/**/*.{js,jsx,json,css}": [ | ||
| "prettier --single-quote --write", | ||
| "git add" | ||
| ] | ||
| }, | ||
| "author": "Mikhail Vasin <michaelvasin@gmail.com>", | ||
| "author": "Mikhail Vasin", | ||
| "homepage": "https://github.com/mvasin/react-div-100vh", | ||
@@ -59,0 +32,0 @@ "repository": { |
@@ -1,3 +0,3 @@ | ||
| # `Div100vh` React component | ||
| [](https://circleci.com/gh/mvasin/react-div-100vh) | ||
| # `Div100vh` React component and `use100vh` React hook | ||
| [](https://badge.fury.io/js/react-div-100vh) | ||
@@ -11,19 +11,11 @@ | ||
| 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 | ||
| ### iOS screenshots | ||
| | `<div style={{height: '100vh'}}>` | `<Div100vh>` | | ||
| | --- | --- | | ||
| | `<div style={{height: '100vh'}}>` | `<Div100vh>` | | ||
| | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | ||
| |  |  | | ||
| ### The demo | ||
| Browse https://react-div-100vh.netlify.com on your phone! | ||
| 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). | ||
| ## API | ||
| - Install it: `npm install --save react-div-100vh` or `yarn add react-div-100vh` | ||
| - Import the component and wrap your stuff with `<Div100vh>` as you would with a normal `<div style={{height: '100vh'}}>`, but this time mobile browsers should display the whole page on load: | ||
| ## The solution | ||
| ### The default behavior | ||
| `Div100vh` React component is the default export: | ||
@@ -33,5 +25,5 @@ ```jsx | ||
| const MyFullscreenComponent = () => ( | ||
| const MyFullHeightComponent = () => ( | ||
| <Div100vh> | ||
| <marquee>Your stuff goes here</marquee> | ||
| <marquee>Look ma, no crop!</marquee> | ||
| </Div100vh> | ||
@@ -41,46 +33,18 @@ ) | ||
| ### Using `rvh` units | ||
| For more advanced use cases (for instance, if you need 50% of the real height, and not 100%), 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 `undefined` in Node environment. You may need to check if it's not `undefined` if you're doing SSR, otherwise manipulate the value as you wish and concatenate the result with `px`: | ||
| If you want to set `min-height` (or any other property) instead, you can use made up `rvh` ("real viewport height") units in values of an object passed to `style` prop. `Div100vh` will find any style declarations with this unit and calculate the value as a percentage of `window.innerHeight`: | ||
| ```jsx | ||
| <Div100vh style={{minHeight: '50rvh'}}> | ||
| <marquee>This is inside a div that takes at least 50% of viewport height.</marquee> | ||
| </Div100vh> | ||
| ``` | ||
| import { use100vh } from 'react-div-100vh' | ||
| If you don't specify `style` prop, it works as if you specified `{height: '100rvh'}`; | ||
| `<Div100vh>` is equivalent to `<Div100vh style={{height: '100rvh'}}>`. | ||
| If you do pass anything to the `style` prop, no implicit style is applied. You can do something like: | ||
| ```jsx | ||
| <Div100vh | ||
| style={{maxHeight: '70rvh', color: 'blue'}} | ||
| onClick={() => console.log('hi')} | ||
| > | ||
| <p>my content here</p> | ||
| </Div100vh> | ||
| const MyHalfHeightExampleComponent = ({ children }) => { | ||
| const height = use100vh() | ||
| const halfHeight = height ? height / 2 : '50vh' | ||
| return <div style={{ height: halfHeight }}>{children}</div> | ||
| } | ||
| ``` | ||
| The rest of the props are passed unchanged to the underlying `div` that `Div100vh` renders. | ||
| Under the hood `use100vh` uses `getRealHeight` function which is exported as well, so feel free to use it, even without React. Currently it returns `document.documentElement?.clientHeight || window.innerHeight`. | ||
| ## Testing | ||
| ### Rendering non-`<div>` elements | ||
| You can also pass an `as` prop to render other elements than `<div>`s - for example, `<main>`, `<section>`, `<footer>`, et cetera. | ||
| ```jsx | ||
| <Div100vh as="main"> | ||
| <p>Some main content</p> | ||
| </Div100vh> | ||
| ``` | ||
| > ❗ Keep in mind that this works best with [block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements), as inline-level elements don't respond to the CSS `height` property. | ||
| ## Additional considerations | ||
| Please note that most likely you will want to set `body {margin: 0}` css, unless you use some css reset that does it for you. | ||
| ## Testing | ||
| This component is tested with Jest and <a href="https://www.browserstack.com"><img title="BrowserStack Logo" alt="BrowserStack Logo" height="40" src="images/Browserstack-logo.svg"></a> | ||
| 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>. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-50%
1
- Dev dependency count
- decreased by-62.5%
9
Worsened metrics
- Total package byte prevSize
- decreased by-86.18%
10557
- Number of package files
- decreased by-73.91%
6
- Lines of code
- decreased by-84.46%
76
- Number of lines in readme file
- decreased by-42.17%
48
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes