https://github.com/scriptedalchemy/intersection-observer-hooks

React hooks for intersection observer
https://github.com/scriptedalchemy/intersection-observer-hooks

Last synced: 13 days ago
JSON representation

React hooks for intersection observer

• Host: GitHub
• URL: https://github.com/scriptedalchemy/intersection-observer-hooks
• Owner: ScriptedAlchemy
• License: mit
• Created: 2019-09-12T21:07:49.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:57:34.000Z (11 months ago)
• Last Synced: 2024-10-06T01:22:26.180Z (about 1 month ago)
• Language: JavaScript
• Size: 166 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


`import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"`

API:

`useIntersectionObserver(callback, nodeRef, options = {}) `

`callback`: returns a bool of when isIntersecting

`options`: Object 


`options.once`: observe once then unobserve

`options.rootMargin`: the root margin for intersection observer

`options.rootRef`: React ref

Example use:

```js

import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"

  useIntersectionObserver((visible) => {

    // then we are not at SSR

    ssr.current = false;

    setOffscreen(!visible);

    onVisibilitySet(visible);

  }, containerRef || ref, {

    once: true,

    rootMargin: '30%',

    rootRef,

  });

  useEffect(() => {

    if (eager) {

      return addTrackedLoader(

        () => {

          setOffscreen(false);

          onVisibilitySet(true);

        },

        containerRef || ref,

      );

    }

    return () => null;

  }, [eager]);

```