Skip to main content

useCurrentScale()v4.0.125

With this hook, you can retrieve the scale factor of the canvas.
Useful for if you want to measure DOM nodes.

In the Studio, it will correspond to the zoom level - the value is 1 if the zoom is at 100%.
In the Player, it will correspond to the scale that is needed to fit the video canvas in the Player.

MyComp.tsx
tsx
import { Sequence, useCurrentScale } from "remotion";
 
const MyVideo = () => {
  const scale = useCurrentScale();
 
  return <div>The current scale is {scale}</div>;
};
MyComp.tsx
tsx
import { Sequence, useCurrentScale } from "remotion";
 
const MyVideo = () => {
  const scale = useCurrentScale();
 
  return <div>The current scale is {scale}</div>;
};

If you are outside of a Remotion context, the hook will throw an error.
If you want to ignore the fact that you are outside of a Remotion context, you can pass true as the first argument to the hook.
The hook will always return 1 in this case.

MyComp.tsx
tsx
import { useCurrentScale } from "remotion";
 
const MyRegularReactComponent = () => {
  const scale = useCurrentScale({ dontThrowIfOutsideOfRemotion: true });
 
  return <div>The current scale is {scale}</div>;
};
MyComp.tsx
tsx
import { useCurrentScale } from "remotion";
 
const MyRegularReactComponent = () => {
  const scale = useCurrentScale({ dontThrowIfOutsideOfRemotion: true });
 
  return <div>The current scale is {scale}</div>;
};

See also​