Skip to content

Commit 1da5e21

Browse files
authored
Update readme.md
1 parent 8b9456e commit 1da5e21

File tree

1 file changed

+18
-14
lines changed

1 file changed

+18
-14
lines changed

readme.md

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
# react-scroll-lock-component
22
[![npm version](https://badge.fury.io/js/react-scroll-lock-component.svg)](https://badge.fury.io/js/react-scroll-lock-component)
33

4-
A React component wrapper that restricts scrolling capabilities of everything except for its children
4+
A React component wrapper that restricts scrolling capabilities of everything except for its children.
5+
6+
Wheel events, touchmove events, and key press events that affect page location (e.g. directional arrows, pageup/pagedown/spacebar) are all locked.
57

68
### Demo
79
Check out the demo [here](https://orteth01.github.io/react-scroll-lock-component-demo)!
@@ -10,30 +12,32 @@ Check out the demo [here](https://orteth01.github.io/react-scroll-lock-component
1012
```
1113
npm install react-scroll-lock-component
1214
```
15+
or
16+
```
17+
yarn add react-scroll-lock-component
18+
```
1319

1420
### Usage
1521
```js
1622
import React, { Component } from 'react';
1723
import ScrollLock from 'react-scroll-lock-component';
1824

19-
export default class extends Component {
20-
render() {
21-
return (
22-
<div>
23-
<ScrollLock> // when scrolling this div nothing else will scroll
24-
<div>
25-
...
26-
</div>
25+
export default () => {
26+
<div>
27+
<ScrollLock>
28+
<div>
29+
{/*
30+
unlike normal scroll functionality, when the user scrolls this
31+
div and reaches the beginning or end nothing else on the page will scroll
32+
*/}
33+
</div>
2734
</ScrollLock>
28-
29-
<div> // normal scrolling everywhere else
30-
...
35+
<div>
36+
{/* scrolling elsewhere on the page will be normal */}
3137
</div>
3238
</div>
3339
);
34-
}
3540
}
36-
3741
```
3842

3943
### Contributing

0 commit comments

Comments
 (0)