usePixelDensity()v4.0.472

Returns the pixel density factor for the current Remotion render or preview.

During preview, this is window.devicePixelRatio. During rendering, this is the scale option.

MyComp.tsx
import {usePixelDensity} from 'remotion';

export const MyComp = () => {
  const pixelDensity = usePixelDensity();

  return <div>Pixel density: {pixelDensity}</div>;
};

If the hook is called outside a Remotion context, it throws an error. To return the browser pixel density outside of Remotion, pass dontThrowIfOutsideOfRemotion: true. In environments without window.devicePixelRatio, the hook returns 1.

MyRegularReactComponent.tsx
import {usePixelDensity} from 'remotion';

export const MyRegularReactComponent = () => {
  const pixelDensity = usePixelDensity({
    dontThrowIfOutsideOfRemotion: true,
  });

  return <div>Pixel density: {pixelDensity}</div>;
};

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• Source code for this function
• Scaling
• useCurrentScale()