usePixelDensity()<AvailableFrom v="4.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.

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.

tsx

import {usePixelDensity} from 'remotion';

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

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

Compatibility