UNPKG

@tanstack/solid-router

Version:

Modern and scalable routing for Solid applications

1 lines 2.16 kB
{"version":3,"file":"utils.cjs","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["import * as Solid from 'solid-js'\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param callback - The callback to call when the intersection changes\n * @param disabled - Whether observation is disabled\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n * ref,\n * (entry) => { doSomething(entry) },\n * false\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n ref: Solid.Accessor<T | null>,\n callback: (entry?: IntersectionObserverEntry) => void,\n disabled: Solid.Accessor<boolean>,\n): Solid.Accessor<IntersectionObserver | null> {\n const isIntersectionObserverAvailable =\n typeof IntersectionObserver === 'function'\n let observerRef: IntersectionObserver | null = null\n\n Solid.createEffect(\n () => [ref(), disabled()] as const,\n ([r, isDisabled]) => {\n if (isDisabled || !r || !isIntersectionObserverAvailable) {\n return () => callback()\n }\n\n observerRef = new IntersectionObserver(\n (entries) => {\n callback(entries.pop())\n },\n { rootMargin: '100px' },\n )\n\n observerRef.observe(r)\n\n return () => {\n observerRef?.disconnect()\n callback()\n }\n },\n )\n\n return () => observerRef\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,wBACd,KACA,UACA,UAC6C;CAC7C,MAAM,kCACJ,OAAO,yBAAyB;CAClC,IAAI,cAA2C;CAE/C,SAAM,mBACE,CAAC,IAAI,GAAG,SAAS,CAAC,IACvB,CAAC,GAAG,gBAAgB;EACnB,IAAI,cAAc,CAAC,KAAK,CAAC,iCACvB,aAAa,SAAS;EAGxB,cAAc,IAAI,sBACf,YAAY;GACX,SAAS,QAAQ,IAAI,CAAC;EACxB,GACA,EAAE,YAAY,QAAQ,CACxB;EAEA,YAAY,QAAQ,CAAC;EAErB,aAAa;GACX,aAAa,WAAW;GACxB,SAAS;EACX;CACF,CACF;CAEA,aAAa;AACf"}