File tree Expand file tree Collapse file tree 1 file changed +23
-0
lines changed
Expand file tree Collapse file tree 1 file changed +23
-0
lines changed Original file line number Diff line number Diff line change @@ -388,3 +388,26 @@ export default function MyElement() {
388388 )
389389}
390390```
391+
392+ ### Example 6: Composing with useState to create a custom hook that clamps to ` true ` once the target element is in viewport
393+
394+ ``` js
395+ import { useState } from ' react'
396+ import useIsInViewport from ' use-is-in-viewport'
397+
398+ export function useClampedIsInViewport (options ) {
399+ const [isInViewport , ... etc ] = useIsInViewport (options)
400+ const [wasInViewportAtleastOnce , setWasInViewportAtleastOnce ] = useState (isInViewport)
401+
402+ setWasInViewportAtleastOnce (prev => {
403+ // this will clamp it to the first true
404+ // received from useIsInViewport
405+ if (! prev) {
406+ return isInViewport
407+ }
408+ return prev
409+ })
410+
411+ return [wasInViewportAtleastOnce, ... etc]
412+ }
413+ ```
You can’t perform that action at this time.
0 commit comments