Skip to content

Commit f2bae61

Browse files
authored
Update README.md
1 parent c4aa76d commit f2bae61

File tree

1 file changed

+16
-17
lines changed

1 file changed

+16
-17
lines changed

README.md

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -64,28 +64,27 @@ This hooks creates an scroll context from a ref to a element that has overflow t
6464
### Example
6565

6666
```js
67-
68-
function Example () {
69-
67+
function Example() {
7068
const scrollRef = useRef(null);
7169

7270
const context = useScrollWatcher(scrollRef);
7371

74-
//This div has an scroll because its content is bigger than it
75-
return
76-
<div
72+
//This div has an scroll because its content is bigger than it
73+
return (
74+
<div
75+
style={{
76+
height: "60vh",
77+
overflow: "scroll",
78+
}}
79+
ref={scrollRef}
80+
>
81+
<div
7782
style={{
78-
height: "60vh",
79-
overflow: "scroll",
83+
height: "4000px",
8084
}}
81-
ref={scrollRef}
82-
>
83-
<div
84-
style={{
85-
height: "4000px",
86-
}}
87-
></div>
88-
</div>
85+
></div>
86+
</div>
87+
);
8988
}
9089
```
9190

@@ -484,4 +483,4 @@ Both Circle and Rectangle accepts [Linear Values Options](#linear-values-options
484483

485484
To make responsive the components, I recommend to use rem or em values, so that way you can modify the font-size of the root or parent component using media queries and therefore modify the sizes of the components.
486485

487-
For more information of how rem and em values work. [Just click here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) and go to the section of relative length units.
486+
For more information of how rem and em values work. [Just click here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) and go to the section of relative length units.

0 commit comments

Comments
 (0)