qol-hooks
Version:
A collection of React hooks to improve the quality of life of developers.
23 lines (22 loc) • 912 B
TypeScript
/// <reference types="react" />
/**
* @description Hook to detect if an element is in view
* @param {IntersectionObserverInit} options - Options for the IntersectionObserver
* @param {(inView: boolean, entry: IntersectionObserverEntry) => void = () => {}} onIntersection - Callback function to be called when the element is in view
*
* @returns {[React.MutableRefObject<HTMLDivElement>, boolean]} - Returns a ref and a boolean value indicating if the element is in view
*
* @example
* ```tsx
* const App = () => {
* const [ref, inView] = useInView({ threshold: 0.5 });
*
* return (
* <div ref={ref}>
* {inView ? "In view" : "Not in view"}
* </div>
* )};
* ```
*/
declare function useInView(options: IntersectionObserverInit, onIntersection?: (inView: boolean, entry: IntersectionObserverEntry) => void): [React.MutableRefObject<HTMLDivElement | undefined>, boolean];
export default useInView;