UNPKG

@tanstack/solid-router

Version:

Modern and scalable routing for Solid applications

63 lines (62 loc) 1.93 kB
const require_runtime = require("./_virtual/_rolldown/runtime.cjs"); let solid_js = require("solid-js"); solid_js = require_runtime.__toESM(solid_js); //#region src/utils.ts var usePrevious = (fn) => { return solid_js.createMemo((prev = { current: null, previous: null }) => { const current = fn(); if (prev.current !== current) { prev.previous = prev.current; prev.current = current; } return prev; }); }; /** * React hook to wrap `IntersectionObserver`. * * This hook will create an `IntersectionObserver` and observe the ref passed to it. * * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`. * * @param ref - The ref to observe * @param intersectionObserverOptions - The options to pass to the IntersectionObserver * @param options - The options to pass to the hook * @param callback - The callback to call when the intersection changes * @returns The IntersectionObserver instance * @example * ```tsx * const MyComponent = () => { * const ref = React.useRef<HTMLDivElement>(null) * useIntersectionObserver( * ref, * (entry) => { doSomething(entry) }, * { rootMargin: '10px' }, * { disabled: false } * ) * return <div ref={ref} /> * ``` */ function useIntersectionObserver(ref, callback, intersectionObserverOptions = {}, options = {}) { const isIntersectionObserverAvailable = typeof IntersectionObserver === "function"; let observerRef = null; solid_js.createEffect(() => { const r = ref(); if (!r || !isIntersectionObserverAvailable || options.disabled) return; observerRef = new IntersectionObserver(([entry]) => { callback(entry); }, intersectionObserverOptions); observerRef.observe(r); solid_js.onCleanup(() => { observerRef?.disconnect(); }); }); return () => observerRef; } //#endregion exports.useIntersectionObserver = useIntersectionObserver; exports.usePrevious = usePrevious; //# sourceMappingURL=utils.cjs.map