diff --git a/.changeset/violet-laws-begin.md b/.changeset/violet-laws-begin.md new file mode 100644 index 0000000..befea76 --- /dev/null +++ b/.changeset/violet-laws-begin.md @@ -0,0 +1,5 @@ +--- +"@wethegit/react-hooks": major +--- + +[hooks] fix(useInView): returned element type based on generic diff --git a/packages/wethegit-react-hooks/src/lib/hooks/use-in-view.ts b/packages/wethegit-react-hooks/src/lib/hooks/use-in-view.ts index fea5bbc..e14ee71 100644 --- a/packages/wethegit-react-hooks/src/lib/hooks/use-in-view.ts +++ b/packages/wethegit-react-hooks/src/lib/hooks/use-in-view.ts @@ -1,10 +1,10 @@ import { useState, useRef, useEffect, useCallback } from "react" -export type InViewHook = [ +export type InViewHook = [ /** * Pass this function to the `ref` prop of the DOM element you want to track visibility of. */ - (node: HTMLElement) => void, + (node: T) => void, /** * Whether the target DOM element is in view, based on the provided `threshold` argument. */ @@ -12,7 +12,7 @@ export type InViewHook = [ /** * The DOM node itself, once set by the `setTargetRef` function. */ - HTMLElement | undefined, + T | undefined, ] /** @@ -27,13 +27,13 @@ export type InViewHook = [ *
* */ -export function useInView( +export function useInView( threshold: number = 0.3, once: boolean = true, setInViewIfScrolledPast: boolean = false -): InViewHook { +): InViewHook { const [isIntersecting, setIntersecting] = useState(false) - const [targetRef, setTargetRef] = useState() + const [targetRef, setTargetRef] = useState() const observerRef = useRef() const observerCallback = useCallback(