react-pre-hooksuseInView
This hook uses useIntersectionObserver hook and returns the intersecting state.
Options
- It takes useIntersectionObserver options, as well as the
onceproperty that determines if it should observe the target element just for one time.
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| isInView | Boolean | whether the target element is in the view or not, if set once to true, it will not change after the target is intersecting. |
Example Usage
tsx
import { useInView } from 'react-pre-hooks';
export default function Example() {
const { ref, isInView } = useInView({ threshold: 0.85 });
return (
<main>
<p>Scroll down..</p>
<div ref={ref} className={isInView ? "show" : ""}></div>
</main>
);
}import { useInView } from 'react-pre-hooks';
export default function Example() {
const { ref, isInView } = useInView({ threshold: 0.85 });
return (
<main>
<p>Scroll down..</p>
<div ref={ref} className={isInView ? "show" : ""}></div>
</main>
);
}