{"_id":"@alminde/react-div-100vh","_rev":"1-e7461225855ff04be240b95e9c6319bb","name":"@alminde/react-div-100vh","dist-tags":{"latest":"0.3.3"},"versions":{"0.3.3":{"name":"@alminde/react-div-100vh","version":"0.3.3","description":"A React component that aims to solve '100vh' issue in mobile browsers","main":"lib/index.js","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":"node scripts/test.js --env=jsdom"},"keywords":[],"license":"MIT","peerDependencies":{"react":">15","react-dom":">15"},"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":"^0.28.11","html-webpack-plugin":"^3.2.0","husky":"^1.1.2","jest":"^23.5.0","lint-staged":"^7.3.0","prettier":"^1.14.3","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":"^2.1.5","webpack-dev-server":"^3.1.6"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,json,css}":["prettier --single-quote --write","git add"]},"jest":{"collectCoverageFrom":["src/**/*.{js,jsx,mjs}"],"setupFiles":["/config/polyfills.js"],"testMatch":["/src/**/__tests__/**/*.{js,jsx,mjs}","/src/**/?(*.)(spec|test).{js,jsx,mjs}"],"testEnvironment":"node","testURL":"http://localhost","transform":{"^.+\\.(js|jsx|mjs)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],"moduleNameMapper":{"^react-native$":"react-native-web"},"moduleFileExtensions":["web.js","js","json","web.jsx","jsx","node","mjs"]},"author":{"name":"Mikhail Vasin","email":"michaelvasin@gmail.com"},"homepage":"https://github.com/mvasin/react-div-100vh","repository":{"type":"git","url":"git+ssh://git@github.com/mvasin/react-div-100vh.git"},"gitHead":"ce5e88e385ff4308dcc41efa60928f8337085f99","bugs":{"url":"https://github.com/mvasin/react-div-100vh/issues"},"_id":"@alminde/react-div-100vh@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"alminde","email":"jalminde@me.com"},"dist":{"integrity":"sha512-jt7JdqhNh8AM9TMS+/X/M6s6envTJvXI+3EMKEmFj/cMvlXIqMiRoeZuTdVt5DJ8Q/OKtGCGtRbt7+9g7RhvTg==","shasum":"c2f5a573527b801855e20d7efff97a4f48918dd0","tarball":"https://registry.npmjs.org/@alminde/react-div-100vh/-/react-div-100vh-0.3.3.tgz","fileCount":23,"unpackedSize":79518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpV3nCRA9TVsSAnZWagAACqUP/0KNr208fnTjJwU36D3i\n8XeIXJ2KVACRJ5w0HpzBEZsEfxaC1hNH3J0Vmac7O4gEWqqVMq3BDzK1RGFQ\nW8HACyLacRIG1YBglyZr7RN1Jpjfe8sze9iY8ci3DPJEX9RSs7iaEYIdsky1\nogwFo9QPLiQ/VDnRFa8A1l/jW/Bm+vcl5A8vhOa+j+EofeEiVpmByzouBfWM\nGQzdZhUKuiEMFCkS/rZQLdHSW9M62eg9JgKGWGqRDNqGQi0em7LJM92N0deV\nugBTRM/lZToei6jE5scjbnB1K2M/z9iYylkIQHuA9pJmO0N0DqO5Nk3cKdaM\n/6MSsFuJJoC80vlY9+0m/6U8FQWUmyP62lafk5gFtL0mG7IwmsP+0RAVTQj9\n9teDumoE1z4GdIz1KGl2EamWowkLDGouBV9u59bsj8N24F/x94xZf2097uEQ\n0ajaqpofUX2Jf2Q2Bt8B8NfoCvYBelxibjz3A9Pu/r73D8VKw/p7DmiCSq9H\nxGJOca8ganmDXGIt2YYi7yEeqPkt4EvE33S7xA47INGxZOLcAsCHUKylobSj\ncqxQNxmel1tp/AKsuR/En0coG82R+3kNPAOfl5lMkcONw0kbNUeBmb5e+rcf\n76FVYuAaDcsdxdRZgfSc3ZioA2nNEwsbOyGpbSkgDn+YMoDy5i0FukM30hew\nXmZg\r\n=FbjX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMdsDR/4375uX1rvUiwpa02d7M9ESvAgHYYz0wlhnjbAiEAyiMm3dn84nrNGyFMxf34CMFedFxgVuNiNerrWm16TM0="}]},"maintainers":[{"name":"alminde","email":"jalminde@me.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-div-100vh_0.3.3_1554341350107_0.1780967106801039"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-04T01:29:09.919Z","0.3.3":"2019-04-04T01:29:10.336Z","modified":"2022-04-04T13:36:36.197Z"},"maintainers":[{"name":"alminde","email":"jalminde@me.com"}],"description":"A React component that aims to solve '100vh' issue in mobile browsers","homepage":"https://github.com/mvasin/react-div-100vh","keywords":[],"repository":{"type":"git","url":"git+ssh://git@github.com/mvasin/react-div-100vh.git"},"author":{"name":"Mikhail Vasin","email":"michaelvasin@gmail.com"},"bugs":{"url":"https://github.com/mvasin/react-div-100vh/issues"},"license":"MIT","readme":"# `Div100vh` React component\n[![CircleCI](https://circleci.com/gh/mvasin/react-div-100vh.svg?style=svg&circle-token=cd3f9e7031e393880d945af301841db926000ec4)](https://circleci.com/gh/mvasin/react-div-100vh)\n[![npm version](https://badge.fury.io/js/react-div-100vh.svg)](https://badge.fury.io/js/react-div-100vh)\n\nThis is a workaround for iOS Safari and other mobile browsers.\n\n## The problem\n\nAt the top of the page, mobile browsers cover bottom of `100vh` page with \"browser chrome\" (that's the name for browser navigation/context buttons, don't confuse with the browser from Google), effectively cropping it. If you have something important at the bottom of your splash screen, chances are it will not be visible/available until user scrolls.\n\nMore 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\n).\n\n## The solution\n### iOS screenshots\n| `
` | `` |\n| --- | --- |\n| ![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) |\n\n### The demo\nBrowse https://react-div-100vh.netlify.com on your phone!\n\n## API\n- Install it: `npm install --save react-div-100vh` or `yarn add react-div-100vh`\n- Import the component and wrap your stuff with `` as you would with a normal `
`, but this time mobile browsers should display the whole page on load:\n\n### The default behavior\n\n```jsx\nimport Div100vh from 'react-div-100vh'\n\nconst MyFullscreenComponent = () => (\n \n Your stuff goes here\n \n)\n```\n\n### Using `rvh` units\n\nIf 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`:\n\n```jsx\n \n This is inside a div that takes at least 50% of viewport height.\n \n```\n\nIf you don't specify `style` prop, it works as if you specified `{height: '100rvh'}`;\n`` is equivalent to ``.\n\nIf you do pass anything to the `style` prop, no implicit style is applied. You can do something like:\n\n```jsx\n console.log('hi')}\n>\n

my content here

\n\n```\n\nThe rest of the props are passed unchanged to the underlying `div` that `Div100vh` renders.\n\n## Additional considerations\n\nPlease note that most likely you will want to set `body {margin: 0}` css, unless you use some css reset that does it for you.\n\n## Testing\nThis component is tested with Jest and \"BrowserStack","readmeFilename":"README.md"}