diff --git a/package.json b/package.json index 196a368..f9131e5 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "release-it": "^14.10.0", - "resize-observer-polyfill": "^1.5.1", "ts-jest": "^27.1.1", "typescript": "^4.5.4", "watch": "^1.0.2" diff --git a/src/utils.ts b/src/utils.ts index 4f84861..1826830 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,6 +1,15 @@ import React, { useState, useEffect, useRef } from 'react'; import { Dimensions } from './types'; -import ResizeObserver from 'resize-observer-polyfill'; + +// There are polyfills for this, but they add hundreds of lines of code +class FakeResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +} + +const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver; +const hasResizeObserver = globalThis.ResizeObserver !== undefined; export function useSize( containerRef: React.MutableRefObject @@ -20,8 +29,8 @@ export function useSize( }); }; - if (isIE()) { - // only listen to window when its IE, as ResizeObserver will be polyfilled. + if (!hasResizeObserver) { + // only pay attention to window size changes when we do not have the resizeObserver (IE only) window.addEventListener('resize', handleResize); handleResize(); } @@ -30,7 +39,7 @@ export function useSize( }, []); const observer = useRef( - new ResizeObserver((entries) => { + new MyResizeObserver((entries) => { setSize({ width: entries[entries.length - 1].contentRect.width, height: entries[entries.length - 1].contentRect.height, @@ -51,35 +60,3 @@ export function useSize( return size; } - -// grabbed from: https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie -// There is a shorter version, but that one ran into type issues with typescript. -export function isIE() { - /** - * detect IEEdge - * returns version of IE/Edge or false, if browser is not a Microsoft browser - */ - const ua = window.navigator.userAgent; - - const msie = ua.indexOf('MSIE '); - if (msie > 0) { - // IE 10 or older => return version number - return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); - } - - const trident = ua.indexOf('Trident/'); - if (trident > 0) { - // IE 11 => return version number - const rv = ua.indexOf('rv:'); - return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); - } - - const edge = ua.indexOf('Edge/'); - if (edge > 0) { - // Edge => return version number - return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); - } - - // other browser - return false; -}