{"id":13727091,"url":"https://github.com/theKashey/react-remove-scroll","last_synced_at":"2025-05-07T22:30:50.682Z","repository":{"id":37689131,"uuid":"166485790","full_name":"theKashey/react-remove-scroll","owner":"theKashey","description":"Removes and disables 📜in a \"React\" way","archived":false,"fork":false,"pushed_at":"2025-04-23T00:36:12.000Z","size":1596,"stargazers_count":864,"open_issues_count":2,"forks_count":36,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-03T07:37:00.058Z","etag":null,"topics":["react","scroll"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theKashey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-18T23:35:55.000Z","updated_at":"2025-05-03T03:08:51.000Z","dependencies_parsed_at":"2024-03-17T00:56:09.753Z","dependency_job_id":"4c21d8bb-9aa0-44cd-8015-a616f7c80e7f","html_url":"https://github.com/theKashey/react-remove-scroll","commit_stats":{"total_commits":126,"total_committers":11,"mean_commits":"11.454545454545455","dds":"0.11111111111111116","last_synced_commit":"2aa31bcd60b47910ec75a109e6a684e5ba30969f"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remove-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remove-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remove-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remove-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/react-remove-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965211,"owners_count":21832839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","scroll"],"created_at":"2024-08-03T01:03:39.088Z","updated_at":"2025-05-07T22:30:50.667Z","avatar_url":"https://github.com/theKashey.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eReact-remove-📜\u003c/h1\u003e\n  \u003cbr/\u003e\n   dont even scroll\n  \u003cbr/\u003e\n  \n  \u003ca href=\"https://www.npmjs.com/package/react-remove-scroll\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-remove-scroll.svg?style=flat-square\" /\u003e\n  \u003c/a\u003e\n    \n  \u003ca href=\"https://travis-ci.org/theKashey/react-remove-scroll\"\u003e\n   \u003cimg src=\"https://img.shields.io/travis/theKashey/react-remove-scroll.svg?style=flat-square\" alt=\"Build status\"\u003e\n  \u003c/a\u003e \n\n  \u003ca href=\"https://www.npmjs.com/package/react-remove-scroll\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/dm/react-remove-scroll.svg\" alt=\"npm downloads\"\u003e\n  \u003c/a\u003e \n\n  \u003ca href=\"https://bundlephobia.com/result?p=react-remove-scroll\"\u003e\n   \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-remove-scroll.svg\" alt=\"bundle size\"\u003e\n  \u003c/a\u003e   \n  \u003cbr/\u003e\n\u003c/div\u003e\n\nreact-remove-scroll\n====\n[![NPM version](https://img.shields.io/npm/v/react-remove-scroll.svg)](https://www.npmjs.com/package/react-remove-scroll)\n\nDisables scroll outside of `children` node.\n\n- 🖱 mouse and touch devices friendly\n- 📈 vertical and horizontal\n- 📜 removes document scroll bar maintaining it space\n- ✅ support nested scrollable elements\n- 🕳 supports react-portals (uses React Event system)\n- ☠️ it could block literally any scroll anywhere\n\n# Usage\nJust wrap content, which should be scrollable, and everything else would not. \n```js\nimport {RemoveScroll} from 'react-remove-scroll';\n\n\u003cRemoveScroll\u003e\n  Only this content would be scrollable\n\u003c/RemoveScroll\u003e  \n```\n\n`RemoveScroll` accept following props\n- `children`\n- `[enabled]` - activate or deactivate component behaviour without removing it.\n- `[allowPinchZoom=false]` - enabled \"pinch-n-zoom\" behavior. By default it might be prevented. However - pinch and zoom might break \"scroll isolation\", and __disabled by default__.\n- `[noIsolation=false]` - disables outer event capturing. Event capturing is React friendly and unlikely be a problem.\nBut if you are using _shadowbox_ of some sort - you dont need it.\n- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` except the Lock(+shards). \nReact portals not friendly, might lead to production issues. Enable only for __rare__ cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards).  \n- `[forwardProps]` - will forward all props to the `children`\n- `[className]` - className for an internal div\n- `[removeScrollBar]` - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll is still disabled).\n\n# Size\n- (🧩 full) 1.7kb after compression (excluding tslib).\n---\n- (👁 UI) __400b__, visual elements only\n- (🚗 sidecar) 1.5kb, side effects\n```js\nimport {sidecar} from \"react-remove-scroll\";\nimport {RemoveScroll} from 'react-remove-scroll/UI';\n\nconst sidecar = sidecar(() =\u003e import('react-remove-scroll/sidecar'));\n\n\u003cRemoveScroll sideCar={sidecar}\u003e\n  Will load logic from a sidecar when needed\n\u003c/RemoveScroll\u003e  \n```\n\n\u003e Consider setting `-webkit-overflow-scrolling: touch;` on a document level for a proper mobile experience.\n\n## Internal div\nBy default RemoveScroll will create a div to handle and capture events.\nYou may specify `className` for it, if you need, or __remove it__.\n\nThe following code samples will produce the same output\n```js\n\u003cRemoveScroll className=\"scroll\"\u003e\n  Only this content would be scrollable\n\u003c/RemoveScroll\u003e\n```\n\n```js\n\u003cRemoveScroll forwardProps\u003e\n  \u003cdiv className=\"scroll\"\u003e //RemoveScroll will inject props to this div\n    Only this content would be scrollable\n  \u003c/div\u003e\n\u003c/RemoveScroll\u003e \n```\nPick the first one if you don't need a second.\n\n## Position:fixed elements\nTo properly size these elements please add a special className to them.\n```jsx\nimport {RemoveScroll} from 'react-remove-scroll';\n\n// to make \"width: 100%\"\n\u003cdiv className={cx(classWithPositionFixed, RemoveScroll.classNames.fullWidth)} /\u003e\n\n// to make \"right:0\"\n\u003cdiv className={cx(classWithPositionFixed, RemoveScroll.classNames.zeroRight)} /\u003e\n```\nSee [react-remove-scroll-bar](https://github.com/theKashey/react-remove-scroll-bar) documentation for details.\n\n## More than one lock\nWhen stacked more is active (default) only one (last) component would be active.\n\n## Over isolation\nThat could happen - \nyou disable scroll on the body, \nyou are suppressing all scroll and wheel events,\nand you are ghosting the rest of the page by the `inert` prop.\n\nOnly something inside Lock does exists for the browser, and that might be less than you expected.\n\nDont forget about `shard`, dont forget - `inert` is not portals friendly, dont forget - you dont need over isolation in most of the cases.\n\n\u003e just be careful! \n\n# Performance\nTo do the job this library setup _non_ passive event listener. Chrome dev tools would complain about it, as a \nperformance no-op.\n\nWe have to use synchronous scroll/touch handler, and it may affect scrolling performance.\n\nConsider using `noIsolation` mode, if you have large scrollable areas.\n\n# Supported React versions\n- v1 supports React 15/16\n- v2 requires 16.8.0+ (hooks)\n\n# Scroll-Locky\nThis is a refactoring of another library - [react-scroll-locky](https://github.com/theKashey/react-scroll-locky) -\nto make package smaller and more react-portals friendly.\n\n## See also\n - [react-focus-on](https://github.com/theKashey/react-focus-on) - Finite Modal creator (uses Scroll-Locky) underneath.\n - [react-locky](https://github.com/theKashey/react-locky) - React event canceler\n - [react-scrolllock](https://github.com/jossmac/react-scrolllock) - React scroll lock\n - [scroll-lock](https://github.com/FL3NKEY/scroll-lock) - DOM scroll lock\n - [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) - DOM scroll lock\n \n \u003e This package is relative smaller(1), more react friendly(2), works with non zero body margins(3), and has a better \"overscroll\" management. \n\n# License\nMIT","funding_links":[],"categories":["react","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtheKashey%2Freact-remove-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FtheKashey%2Freact-remove-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtheKashey%2Freact-remove-scroll/lists"}