https://github.com/AvraamMavridis/react-intersection-visible-hook

React Hook to track the visibility of a functional component
https://github.com/AvraamMavridis/react-intersection-visible-hook

hook intersectionobserver react visibility

Last synced: about 2 months ago
JSON representation

React Hook to track the visibility of a functional component

• Host: GitHub
• URL: https://github.com/AvraamMavridis/react-intersection-visible-hook
• Owner: AvraamMavridis
• Created: 2018-10-26T06:21:12.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2018-10-30T08:16:40.000Z (over 5 years ago)
• Last Synced: 2024-04-02T02:41:20.236Z (3 months ago)
• Topics: hook, intersectionobserver, react, visibility
• Language: JavaScript
• Homepage:
• Size: 2.86 MB
• Stars: 49
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Lists

• awesome-react-hooks - react-intersection-visible-hook - React hook to track the visibility of a functional component based on IntersectionVisible Observer. (Extensions/Libraries)
• awesome-react-hooks - `react-intersection-visible-hook`
• awesome-react-hooks-cn - `react-intersection-visible-hook`
• awesome-react-hooks - `react-intersection-visible-hook`
• fucking-awesome-react-hooks - `react-intersection-visible-hook`
• awesome-react-hooks - `react-intersection-visible-hook`
• awesome-react-hooks - `react-intersection-visible-hook`

README

        
# react-intersection-visible-hook

React hook to track the visibility of a functional component based on IntersectionVisible Observer.

In the following example we changed the background color of the body depending on the visibility of the blue box.



*Demo and tests are coming*

```

import useVisibility from 'react-intersection-visible-hook'

```

### How to use it

```js

function App() {

  const nodeRef = useRef(null);

  const visibility = useVisibility(nodeRef);

  return (

    


      
Hello

    

  );

}

```


##### With options

```js

const options = {

  root: document.querySelector('#scrollArea'),

  rootMargin: '0px',

  threshold: 1.0

}

function App() {

  const nodeRef = useRef(null);

  const visibility = useVisibility(nodeRef, options);

  return (

    


      
Hello

      
{visibility.isIntersecting ?  'Component is visible' : 'Component is hidden' }

    

  );

}

```


The `visibility` object contains

```

boundingClientRect

intersectionRatio

intersectionRect

isIntersecting

rootBounds

target

time

```

### Contribute

Any pull-request is more than welcome :boom: :smile:

### License

MIT