https://github.com/bmcmahen/use-scroll-lock
a simple react hook for scroll-locking
https://github.com/bmcmahen/use-scroll-lock
hooks react scroll-lock
Last synced: about 1 year ago
JSON representation
a simple react hook for scroll-locking
- Host: GitHub
- URL: https://github.com/bmcmahen/use-scroll-lock
- Owner: bmcmahen
- Created: 2019-07-15T07:32:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T22:33:39.000Z (over 3 years ago)
- Last Synced: 2025-04-14T03:48:34.880Z (about 1 year ago)
- Topics: hooks, react, scroll-lock
- Language: TypeScript
- Homepage:
- Size: 3.84 MB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# use-scroll-lock
[scroll-lock](https://github.com/FL3NKEY/scroll-lock) is the most reliable scroll-locking library from my experience, and I wanted to use it in hook form. This super simple hook is the result.
## Install
```
yarn add use-scroll-lock
```
## Basic usage
`useScrollLock` accepts two optional arguments.
- **enabled** - Whether the scroll locking is enabled. By default this is true.
- **container** - An optional container which permits scrollable content even when scrolling is locked.
```jsx
function Example() {
const [enabled, setEnabled] = React.useState(false);
const ref = React.useRef(null);
useScrollLock(enabled, ref);
return (
setEnabled(!enabled)}>
{enabled ? "turn off" : "turn on"}
Scrollable content
);
}
```
You can also use the `data-scroll-lock-scrollable` attribute on whatever element you want to enable scrolling and omit the second argument.