blob: a9f06ec8b84a15c397004eaf06fd33100ceb98f8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
/**
* Tracks an element's height via ResizeObserver.
* Returns a reactive signal that updates whenever the element resizes.
*/
export function useElementHeight(
ref: Accessor<HTMLElement | undefined> | (() => HTMLElement | undefined),
initial = 0,
): Accessor<number> {
const [height, setHeight] = createSignal(initial)
createEffect(() => {
const el = ref()
if (!el) return
setHeight(el.getBoundingClientRect().height)
const observer = new ResizeObserver(() => {
setHeight(el.getBoundingClientRect().height)
})
observer.observe(el)
onCleanup(() => observer.disconnect())
})
return height
}
|
