eewing
23 lines
757 B
JavaScript
23 lines
757 B
JavaScript
import { watch } from "runed";
|
|
import { onDestroyEffect } from "./on-destroy-effect.svelte.js";
|
|
/**
|
|
* Finds the node with that ID and sets it to the boxed node.
|
|
* Reactive using `$effect` to ensure when the ID or deps change,
|
|
* an update is triggered and new node is found.
|
|
*/
|
|
export function useRefById({ id, ref, deps = () => true, onRefChange, getRootNode }) {
|
|
watch([() => id.current, deps], ([_id]) => {
|
|
const rootNode = getRootNode?.() ?? document;
|
|
const node = rootNode?.getElementById(_id);
|
|
if (node)
|
|
ref.current = node;
|
|
else
|
|
ref.current = null;
|
|
onRefChange?.(ref.current);
|
|
});
|
|
onDestroyEffect(() => {
|
|
ref.current = null;
|
|
onRefChange?.(null);
|
|
});
|
|
}
|