`tsx
import { useIsomorphicLayoutEffect } from "@utilityjs/use-isomorphic-layout-effect";
import { useRef } from "react";

function Canvas() {
const canvasRef = useRef(null);

useIsomorphicLayoutEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;

const ctx = canvas.getContext("2d");
if (!ctx) return;

// Set canvas size to match display size
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * window.devicePixelRatio;
canvas.height = rect.height * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

// Draw something
ctx.fillStyle = "#007bff";
ctx.fillRect(10, 10, 100, 50);
ctx.fillStyle = "white";
ctx.font = "16px Arial";
ctx.fillText("Canvas", 20, 35);
}, []);

return (
ref={canvasRef}
style={{ width: "200px", height: "100px", border: "1px solid #ccc" }}
/>
);
}
`

$3

`tsx
import { useIsomorphicLayoutEffect } from "@utilityjs/use-isomorphic-layout-effect";
import { useRef } from "react";

function ChartComponent({ data }: { data: number[] }) {
const chartRef = useRef(null);

useIsomorphicLayoutEffect(() => {
if (!chartRef.current || typeof window === "undefined") return;

// Dynamically import chart library only on client
import("chart.js").then(({ Chart, registerables }) => {
Chart.register(...registerables);

const canvas = document.createElement("canvas");
chartRef.current!.appendChild(canvas);

const chart = new Chart(canvas, {
type: "line",
data: {
labels: data.map((_, i) => Point ${i + 1}),
datasets: [
{
label: "Data",
data: data,
borderColor: "#007bff",
backgroundColor: "rgba(0, 123, 255, 0.1)",
},
],
},
});

return () => chart.destroy();
});
}, [data]);

return (
ref={chartRef}
style={{ width: "400px", height: "200px" }}
/>
);
}
`

$3

`tsx
import { useIsomorphicLayoutEffect } from "@utilityjs/use-isomorphic-layout-effect";
import { useRef, useState } from "react";

function useElementSize() {
const ref = useRef(null);
const [size, setSize] = useState({ width: 0, height: 0 });

useIsomorphicLayoutEffect(() => {
const element = ref.current;
if (!element) return;

const updateSize = () => {
setSize({
width: element.offsetWidth,
height: element.offsetHeight,
});
};

// Initial measurement
updateSize();

// Set up ResizeObserver if available
if (typeof ResizeObserver !== "undefined") {
const resizeObserver = new ResizeObserver(updateSize);
resizeObserver.observe(element);
return () => resizeObserver.disconnect();
}

// Fallback to window resize
window.addEventListener("resize", updateSize);
return () => window.removeEventListener("resize", updateSize);
}, []);

return { ref, size };
}

function SizeAwareComponent() {
const { ref, size } = useElementSize();

return (
ref={ref}
style={{
width: "50%",
minHeight: "100px",
backgroundColor: "#f0f0f0",
padding: "20px",
resize: "both",
overflow: "auto",
}}
>


Width: {size.width}px