Skip to content

Commit 9c24950

Browse files
committed
Update readme
1 parent 06c4d1b commit 9c24950

File tree

1 file changed

+23
-1
lines changed

1 file changed

+23
-1
lines changed

Readme.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,29 @@ causes an issue in your application.
2121

2222
## Usage
2323

24-
[![Edit use-intersection-observer example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/54r7k92m04?fontsize=14)
24+
### Example 1: Element with its parent document as viewport
25+
26+
As soon as at least 1px of the child element is visible in the parent document viewport,
27+
`isInViewport` evaluates to true.
28+
29+
```jsx
30+
import React from 'react'
31+
import ReactDOM from 'react-dom'
32+
import useIsInViewport from '@zeusdeux/use-is-in-viewport
33+
34+
export default function OnlyChildWithNullViewport() {
35+
const [isInViewport, childElToWatch] = useIsInViewport()
36+
37+
return (
38+
<div ref={childElToWatch}>
39+
<p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
40+
</div>
41+
)
42+
}
43+
44+
```
45+
46+
More example coming soon...
2547
2648
## Tasks
2749

0 commit comments

Comments
 (0)