react intersectionObserver helper library.
npm install react-hooks-visible !npm
react-hooks-visible is React Hooks library for element visibility. Uses the intersection observer API.
``shell`
yarn add react react-hooks-visible
started
`javascript
import React from 'react'
import { useVisible } from 'react-hooks-visible'
const VisibleComponent = () => {
const [targetRef, visible] = useVisible()
return (
Pass a function to an argument, and you can change the return value
`javascript
// Percent value.
const [targetRef, percent] = useVisible((vi: number) => Math.floor(vi * 100))// Boolean. This example is 50% visible.
const [targetRef, isVisible] = useVisible((vi: number) => vi > 0.5)
// CSSProperties. opacity
const [styleExampleRef, visibleStyle] = useVisible((vi: number) => ({
opacity: vi
}))
`$3
This is same as IntersectionObserver Option.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer
`javascript
const [targetRef, visible] = useVisble(Math.floor(visible * 100),{
root: document.querySelector('wrapper') // Wrap element
rootMargin: '10px', //wrap element margin
threshold: [0.1, 0.2, 0.3, 0.4]
})
``