87671ce026
Imported official Remotion skill for video creation in React: - 28 modular rule files covering animations, audio, video, captions, 3D, etc. - Added author (remotion-dev) and version (1.0) metadata - Updated skill count: 224 → 225 - Regenerated skills_index.json Source: https://github.com/remotion-dev/skills
36 lines
974 B
Markdown
36 lines
974 B
Markdown
---
|
|
name: measuring-dom-nodes
|
|
description: Measuring DOM element dimensions in Remotion
|
|
metadata:
|
|
tags: measure, layout, dimensions, getBoundingClientRect, scale
|
|
---
|
|
|
|
# Measuring DOM nodes in Remotion
|
|
|
|
Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
|
|
|
|
## Measuring element dimensions
|
|
|
|
```tsx
|
|
import { useCurrentScale } from "remotion";
|
|
import { useRef, useEffect, useState } from "react";
|
|
|
|
export const MyComponent = () => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const scale = useCurrentScale();
|
|
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const rect = ref.current.getBoundingClientRect();
|
|
setDimensions({
|
|
width: rect.width / scale,
|
|
height: rect.height / scale,
|
|
});
|
|
}, [scale]);
|
|
|
|
return <div ref={ref}>Content to measure</div>;
|
|
};
|
|
```
|
|
|