32 lines
1015 B
TypeScript
32 lines
1015 B
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
/**
|
|
* Tracks a container element's width with a plain resize listener, instead
|
|
* of relying on Recharts' ResponsiveContainer (which uses a ResizeObserver
|
|
* internally and can silently never fire in some browser/extension setups
|
|
* — when that happens, ResponsiveContainer renders an empty div forever,
|
|
* with no error and no fallback). This sidesteps that failure mode
|
|
* entirely: charts get an explicit pixel width from plain DOM measurement,
|
|
* which always works.
|
|
*/
|
|
export function useContainerWidth<T extends HTMLElement>(fallback = 600) {
|
|
const ref = useRef<T>(null);
|
|
const [width, setWidth] = useState(fallback);
|
|
|
|
useEffect(() => {
|
|
function measure() {
|
|
if (ref.current) {
|
|
setWidth(ref.current.clientWidth || fallback);
|
|
}
|
|
}
|
|
|
|
measure();
|
|
window.addEventListener('resize', measure);
|
|
return () => window.removeEventListener('resize', measure);
|
|
}, [fallback]);
|
|
|
|
return { ref, width };
|
|
}
|