export const DEFAULT_PIXEL_RATIO = 1;
  export function clientPixelRatio(): number {
    if (typeof window !== 'undefined' && window.devicePixelRatio) {
      return Math.round(window.devicePixelRatio);
    }
    return DEFAULT_PIXEL_RATIO;
  }


  const [ratio, setRatio] = useState(clientPixelRatio());

  const handleChange = useCallback(() => {
    setRatio(clientPixelRatio());
  }, []);

  // This is to monitor screen changement
  // See https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
  useEffect(() => {
    const mediaMatcher = window.matchMedia(`screen and (resolution: ${ratio}dppx)`);
    mediaMatcher && mediaMatcher.addEventListener('change', handleChange, { once: true });
    return () => {
      mediaMatcher && mediaMatcher.removeEventListener('change', handleChange);
    };
  }, [handleChange, ratio]);