File tree Expand file tree Collapse file tree 1 file changed +23
-1
lines changed Expand file tree Collapse file tree 1 file changed +23
-1
lines changed Original file line number Diff line number Diff 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
You can’t perform that action at this time.
0 commit comments