# Example: Reading density heights reactively The useDensityHeights recipe from this page run twice — once given a boxed wrapper whose data-density the buttons flip, once given null so it reads the document root — with a readout showing only the scoped one moving. Source: https://pretable.ai/examples/density-helpers.md ```tsx DensityHeightsDemo.tsx "use client"; import { useState } from "react"; import { useDensityHeights } from "./useDensityHeights"; type Density = "compact" | "standard" | "spacious"; const DENSITIES: readonly Density[] = ["compact", "standard", "spacious"]; export function DensityHeightsDemo() { const [density, setDensity] = useState("standard"); const [wrapper, setWrapper] = useState(null); // The same hook twice, differing only in the element it is given. The // element is the whole of the scoping mechanism: `getDensityHeights` resolves // the tokens where that element paints, and the tokens inherit, so the boxed // wrapper's own `data-density` is what the first reading sees. const scoped = useDensityHeights(wrapper); // `null` means "no element", which resolves `document.documentElement` — this // docs page's real root, which the buttons below never touch. const page = useDensityHeights(null); return (

These buttons set data-density on the boxed wrapper below, not on <html> — a docs-site adaptation so this demo does not re-theme the rest of the page. "Boxed wrapper" is the{" "} useDensityHeights recipe above given that element; "Page root" is the identical hook given null, so it reads the document root and stays constant no matter which button is pressed.

{DENSITIES.map((option) => ( ))}

Reading	Row height	Header height
Boxed wrapper (data-density="{density}")	{scoped.rowHeight}px	{scoped.headerHeight}px
Page root (unaffected)	{page.rowHeight}px	{page.headerHeight}px

); } ``` ```ts useDensityHeights.ts import { useCallback, useRef, useSyncExternalStore } from "react"; import { getDensityHeights, type DensityHeights } from "@pretable/ui"; const SERVER_SNAPSHOT: DensityHeights = { rowHeight: 32, headerHeight: 36 }; // Every element whose attributes could change what `element` resolves to: the // element itself, then each ancestor up to ``. The density tokens are // inherited custom properties, so a `data-density` anywhere on that chain is // what the element paints under — watching the root alone would miss a swap on // a wrapper, and watching the wrapper alone would miss one on the root. function scopeChain(element: Element | null): Element[] { const chain: Element[] = []; for ( let current = element; current !== null; current = current.parentElement ) { chain.push(current); } const root = document.documentElement; if (!chain.includes(root)) chain.push(root); return chain; } function subscribe(element: Element | null, onChange: () => void): () => void { if (typeof document === "undefined") return () => {}; const observer = new MutationObserver(onChange); for (const node of scopeChain(element)) { observer.observe(node, { attributes: true, attributeFilter: ["data-density", "data-theme", "class", "style"], }); } return () => observer.disconnect(); } export function useDensityHeights(element: Element | null): DensityHeights { const cached = useRef(null); const subscribeToScope = useCallback( (onChange: () => void) => subscribe(element, onChange), [element], ); const getSnapshot = useCallback(() => { const next = getDensityHeights(element); const prev = cached.current; // `useSyncExternalStore` calls this on every render and compares by // reference. Returning a fresh object each time is an infinite render // loop, so hand back the previous one when the numbers have not moved. if ( prev !== null && prev.rowHeight === next.rowHeight && prev.headerHeight === next.headerHeight ) { return prev; } cached.current = next; return next; }, [element]); return useSyncExternalStore( subscribeToScope, getSnapshot, () => SERVER_SNAPSHOT, ); } ```