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 avoid this error and return a default scale, you can pass an options object with the property dontThrowIfOutsideOfRemotion set to true.
In this case, the hook will return 1.

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​