{"_id":"@densyakun/react-full-height","name":"@densyakun/react-full-height","dist-tags":{"latest":"1.2.4"},"versions":{"1.2.4":{"name":"@densyakun/react-full-height","version":"1.2.4","description":"React component to make your container view port height","main":"./dist/lib/index.umd.js","module":"./dist/lib/index.mjs","types":"./types/index.d.ts","exports":{".":{"umd":"./dist/lib/index.umd.js","import":{"types":"./types/index.d.ts","default":"./dist/lib/index.mjs"},"require":"./dist/lib/index.umd.js"},"./package.json":"./package.json"},"scripts":{"dev":"vite --config vite.config.app.ts","build":"tsc -b && vite build --config vite.config.app.ts && vite build --config vite.config.lib.ts","lint":"eslint .","preview":"vite preview --config vite.config.app.ts","test":"jest"},"author":{"name":"qmixi"},"contributors":[{"name":"qmixi"},{"name":"Densyakun","email":"densyakun1128@gmail.com","url":"https://github.com/Densyakun"}],"repository":{"type":"git","url":"git+https://github.com/qmixi/react-full-height.git"},"license":"MIT","dependencies":{"prop-types":"^15.8.1","react":"^19.2.0","react-dom":"^19.2.0","styled-components":"^6.1.19"},"devDependencies":{"@eslint/js":"^9.39.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/jest":"^30.0.0","@types/node":"^24.10.1","@types/prop-types":"^15.7.15","@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@vitejs/plugin-react-swc":"^4.2.2","eslint":"^9.39.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","globals":"^16.5.0","jest":"^30.2.0","jest-environment-jsdom":"^30.2.0","jest-transform-stub":"^2.0.0","ts-jest":"^29.4.6","typescript":"~5.9.3","typescript-eslint":"^8.46.4","vite":"^7.2.4"},"optionalDependencies":{"@rollup/rollup-linux-x64-gnu":"4.6.1"},"keywords":["react","component","container","section","full","height","viewport","fullheight","full-height","100%","react-full-height","responsive","customizable"],"bugs":{"url":"https://github.com/qmixi/react-full-height/issues"},"homepage":"https://github.com/qmixi/react-full-height#readme","_id":"@densyakun/react-full-height@1.2.4","gitHead":"2e2dac335c7ab3c0968db1b9024438cc20462a59","_nodeVersion":"22.17.1","_npmVersion":"11.5.2","dist":{"integrity":"sha512-QmXiLU6j1TXXU6ZtN5UEyKj0TuenjV0IGgcNJky2Yo9F8AcocTCcazAXqEf+XMPzGtRjvA9Ap4mPbjMH1lxRkg==","shasum":"7de84cb1ffe70204de47eaaa0a77e732046d0fe2","tarball":"https://registry.npmjs.org/@densyakun/react-full-height/-/react-full-height-1.2.4.tgz","fileCount":11,"unpackedSize":154471,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH+Ip/+QJL0END3/WuaHe2EXMVvRSCddCkH8VXbfNTcZAiB366C1N1nNXiymff9+TcOpge7XwuCG0p9AoofBeJ943A=="}]},"_npmUser":{"name":"densyakun","email":"densyakun1128@gmail.com"},"directories":{},"maintainers":[{"name":"densyakun","email":"densyakun1128@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-full-height_1.2.4_1765552641007_0.194547950271593"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-12T15:17:20.895Z","1.2.4":"2025-12-12T15:17:21.170Z","modified":"2025-12-12T15:17:21.502Z"},"maintainers":[{"name":"densyakun","email":"densyakun1128@gmail.com"}],"description":"React component to make your container view port height","homepage":"https://github.com/qmixi/react-full-height#readme","keywords":["react","component","container","section","full","height","viewport","fullheight","full-height","100%","react-full-height","responsive","customizable"],"repository":{"type":"git","url":"git+https://github.com/qmixi/react-full-height.git"},"contributors":[{"name":"qmixi"},{"name":"Densyakun","email":"densyakun1128@gmail.com","url":"https://github.com/Densyakun"}],"author":{"name":"qmixi"},"bugs":{"url":"https://github.com/qmixi/react-full-height/issues"},"license":"MIT","readme":"[![CircleCI](https://circleci.com/gh/qmixi/react-full-height.svg?style=svg)](https://circleci.com/gh/qmixi/react-full-height) [![Issues][issues-shield]][issues-url] [![npm](https://badgen.net/npm/dt/react-full-height)](https://www.npmjs.com/package/react-full-height) [![npm](https://badgen.net/npm/dm/react-full-height)](https://www.npmjs.com/package/react-full-height) [![MIT License][license-shield]][license-url]\r\n\r\n<br />\r\n<br />\r\n<br />\r\n<p align=\"center\">\r\n  <a href=\"https://github.com/qmixi/react-full-height\">\r\n    <img src=\"public/icon.png\" alt=\"Logo\" width=\"100\" height=\"100\">\r\n  </a>\r\n\r\n  <h2 align=\"center\">React Full Height</h2>\r\n\r\n  <p align=\"center\">\r\n    Responsive component helping you make perfect full viewport height sections \r\n    <br />\r\n    <br />\r\n    <a href=\"https://qmixi.github.io/react-full-height/demo/\">View Demo</a>\r\n    ·\r\n    <a href=\"https://github.com/qmixi/react-full-height/issues\">Report Bug</a>\r\n    ·\r\n    <a href=\"https://github.com/qmixi/react-full-height/issues\">Request Feature</a>\r\n  </p>\r\n</p>\r\n<br />\r\n\r\n<!-- GETTING STARTED -->\r\n\r\n## Getting Started\r\n\r\nThis component has been built to help you create responsive and customizable full-height sections. You can always have a full-height section or you can adjust `FullHeight` component easily to achieve full-height effect only in mobile, desktop or in some specific resolution range.\r\n\r\n### Installation\r\n\r\nWith `npm`\r\n\r\n```sh\r\nnpm install --save react-full-height\r\n```\r\n\r\nOr with `yarn`\r\n\r\n```sh\r\nyarn add react-full-height\r\n```\r\n\r\n<!-- USAGE EXAMPLES -->\r\n\r\n## Usage\r\n\r\n### Basic usage\r\n\r\nThe very basic usage is to just wrap your content in `FullHeight`.\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport FullHeight from \"react-full-height\";\r\n\r\nconst MySection = () => <FullHeight>My section content</FullHeight>;\r\n```\r\n\r\n### Passing className and section default props\r\n\r\n`<FullHeight />` renders a `section`, and it will accept any usual `div`/`section` props, including `className`.\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport FullHeight from \"react-full-height\";\r\n\r\nconst MyCustomSection = () => (\r\n  <FullHeight className=\"section-styles\">\r\n    <h2>My section title</h2>\r\n    <p>Full-height section content</p>\r\n  </FullHeight>\r\n);\r\n```\r\n\r\n### Follow the content height when it exceeds the viewport height\r\n\r\nBy default `<FullHeight />` has a viewport height, so when your content inside will exceed this height, then the section will be scrollable. If you want the `<FullHeight />` to follow the content section in this case, then add `canExceed` prop.\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport FullHeight from \"react-full-height\";\r\n\r\nconst MyCustomSection = () => (\r\n  <FullHeight canExceed>\r\n    <h2>My section title</h2>\r\n    <p>A lot of content, that the height of the content exceeds viewport height....</p>\r\n  </FullHeight>\r\n);\r\n```\r\n\r\n### Make your full-height section responsive\r\n\r\n> You can decide about breakpoint by your own\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport FullHeight from \"react-full-height\";\r\n\r\n/*\r\n * Make full-height section only in the mobile resolution screens (up to 768px)\r\n */\r\nconst MobileFullHeightSection = () => (\r\n  <FullHeight endWidth={768}>My mobile only full-height section</FullHeight>\r\n);\r\n\r\n/*\r\n * Make full-height section only in the desktop resolution screens (from 1024px)\r\n */\r\nconst DesktopFullHeightSection = () => (\r\n  <FullHeight startWidth={1024}>My desktop only full-height section</FullHeight>\r\n);\r\n\r\n/*\r\n * Make full-height section only in the tablet resolution screens (from 768px to 1024px)\r\n */\r\nconst TabletFullHeightSection = () => (\r\n  <FullHeight startWidth={768} endWidth={1024}>\r\n    My tablet only full-height section\r\n  </FullHeight>\r\n);\r\n```\r\n\r\n## This component takes following props\r\n\r\n| Prop name  | Type    | Required | Description                                                                                                                                                                    |\r\n| ---------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| className  | string  | false    | The class name provided to the component. It takes CSS modules as well.                                                                                                        |\r\n| startWidth | number  | false    | RWD Breakpoint representing `(min-width)` - By setting it you're telling component from which resolution it should be full-height section.                                     |\r\n| endWidth   | number  | false    | RWD Breakpoint representing `(max-width`) - Decide at which screen resolution your section should no longer be a full-heigh.                                                   |\r\n| canExceed  | boolean | false    | By default is `false`. When you set it as `true` and your section content will exceed viewport height then the section will follow the content height (by default (without this props) the section will be scrollable) |\r\n\r\n<!-- LICENSE -->\r\n\r\n## License\r\n\r\nDistributed under the MIT License. See `LICENSE` for more information.\r\n\r\n<!-- CONTACT -->\r\n\r\n## Contact\r\n\r\n#### Author: [@qmixi](https://github.com/qmixi)\r\n\r\n#### Demo: [https://qmixi.github.io/react-full-height](https://qmixi.github.io/react-full-height)\r\n\r\n#### Project Link: [https://github.com/qmixi/react-full-height](https://github.com/qmixi/react-full-height)\r\n\r\n[forks-shield]: https://img.shields.io/github/forks/qmixi/react-full-height.svg?style=flat-square\r\n[forks-url]: https://github.com/qmixi/react-full-height/network/members\r\n[issues-shield]: https://img.shields.io/github/issues/qmixi/react-full-height.svg?style=flat-square\r\n[issues-url]: https://github.com/qmixi/react-full-height/issues\r\n[license-shield]: https://img.shields.io/github/license/qmixi/react-full-height.svg?style=flat-square\r\n[license-url]: https://github.com/qmixi/react-full-height/blob/master/LICENSE.txt\r\n","readmeFilename":"README.md","_rev":"1-80dcfab3a8f3a2ce72e00dc40686f595"}