Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 26 27 28 29 30 31 32 33 34 35 36 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
import { useEffect, useRef, useState } from 'react';
import * as m from 'motion/react-m';
interface Props {
children: React.ReactNode;
}
export const AnimateDynamicHeight = ({ children }: Props) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const [height, setHeight] = useState<number | 'auto'>('auto');
useEffect(() => {
if (containerRef.current) {
const resizeObserver = new ResizeObserver((entries) => {
const observedHeight = entries[0].contentRect.height;
setHeight(observedHeight);
});
resizeObserver.observe(containerRef.current);
return () => {
resizeObserver.disconnect();
};
}
}, []);
return (
<m.div style={{ height }} animate={{ height }} transition={{ duration: 0.15 }}>
<div ref={containerRef}>{children}</div>
</m.div>
);
};
|