react-hooks-visible
react-hooks-visible
is React Hooks library for element visibility. Uses the intersection observer API.
Get started
yarn add react react-hooks-visible
How to use
started
const VisibleComponent = { const targetRef visible = return <div ref=targetRef>This is Math % visible </div> }
Pass a function to an argument, and you can change the return value
// Percent value.const targetRef percent = // Boolean. This example is 50% visible.const targetRef isVisible = // CSSProperties. opacityconst styleExampleRef visibleStyle =
Options.
This is same as IntersectionObserver Option. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer
const targetRef visible =