visibility sensor for an element in a page

Question

visibility sensor for an element in a page

imbhargav5 opened this issue 6 years ago · 4 comments

Check if an element is scrolled into view.

import {useRef} from "react"
import useVisibilitySensor from '@rehooks/visibility-sensor';

const StyledDiv = styled.div`
  opacity : ${props=>props.isVisible? 1 : 0.2}; 
`
function MyComponent() {
  const elementToObserve = useRef(null);
  let visibility = useVisibilitySensor(elementToObserve);
  return <StyledDiv ref={elementToObserve} {...visibility} />;
}

I want to claim this if it's possible.

Answer 1 · 2018-10-26T07:18:59.000Z

Started work on it.

Answer 2 · 2018-10-26T10:14:09.000Z

Almost done.

Answer 3 · 2018-10-26T11:18:53.000Z

https://github.com/imbhargav5/rehooks-visibility-sensor

Answer 4 · 2018-10-28T02:27:13.000Z

@jamiebuilds What do you think?