@os-design/use-resize-observer 1.0.20 → 1.0.22

package/dist/cjs/index.js

@@ -8,7 +8,7 @@ var _useBrowserLayoutEffect = _interopRequireDefault(require("@os-design/use-bro
 var _react = require("react");
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var useResizeObserver = function useResizeObserver(target, listener) {
   var listenerRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -33,6 +33,5 @@ var useResizeObserver = function useResizeObserver(target, listener) {
     };
   }, [target]);
 };
-var _default = useResizeObserver;
-exports["default"] = _default;
+var _default = exports["default"] = useResizeObserver;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_useBrowserLayoutEffect","_interopRequireDefault","require","_react","_resizeObserverPolyfill","obj","__esModule","_typeof","Symbol","iterator","constructor","prototype","useResizeObserver","target","listener","listenerRef","useRef","useEffect","current","useBrowserLayoutEffect","element","Element","undefined","eventListener","entries","observer","resizeObserver","ResizeObserver","observe","unobserve","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAF,GAAA,sCAAAE,OAAA,wBAAAC,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAJ,GAAA,kBAAAA,GAAA,gBAAAA,GAAA,WAAAA,GAAA,yBAAAG,MAAA,IAAAH,GAAA,CAAAK,WAAA,KAAAF,MAAA,IAAAH,GAAA,KAAAG,MAAA,CAAAG,SAAA,qBAAAN,GAAA,KAAAE,OAAA,CAAAF,GAAA;AAEtD,IAAMO,iBAAiB,GAAG,SAApBA,iBAAiBA,CACrBC,MAAoC,EACpCC,QAAgC,EACvB;EACT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAyB,CAAC;EAEpD,IAAAC,gBAAS,EAAC,YAAM;IACdF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAAK,kCAAsB,EAAC,YAAM;IAC3B,IAAIC,OAAO;IACX,IAAIb,OAAA,CAAOM,MAAM,MAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDO,OAAO,GAAGP,MAAM,YAAYQ,OAAO,GAAGR,MAAM,GAAGA,MAAM,CAACK,OAAO;IAC/D;IAEA,IAAI,CAACE,OAAO,EAAE,OAAO;MAAA,OAAME,SAAS;IAAA;IAEpC,IAAMC,aAAqC,GAAG,SAAxCA,aAAqCA,CAAIC,OAAO,EAAEC,QAAQ,EAAK;MACnE,IAAI,CAACV,WAAW,CAACG,OAAO,EAAE;MAC1BH,WAAW,CAACG,OAAO,CAACM,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAMC,cAAc,GAAG,IAAIC,kCAAc,CAACJ,aAAa,CAAC;IACxDG,cAAc,CAACE,OAAO,CAACR,OAAO,CAAC;IAE/B,OAAO;MAAA,OAAMM,cAAc,CAACG,SAAS,CAACT,OAAO,CAAC;IAAA;EAChD,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;AACd,CAAC;AAAC,IAAAiB,QAAA,GAEalB,iBAAiB;AAAAmB,OAAA,cAAAD,QAAA"}
+{"version":3,"file":"index.js","names":["_useBrowserLayoutEffect","_interopRequireDefault","require","_react","_resizeObserverPolyfill","obj","__esModule","_typeof","o","Symbol","iterator","constructor","prototype","useResizeObserver","target","listener","listenerRef","useRef","useEffect","current","useBrowserLayoutEffect","element","Element","undefined","eventListener","entries","observer","resizeObserver","ResizeObserver","observe","unobserve","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAC,CAAA,sCAAAD,OAAA,wBAAAE,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAF,CAAA,kBAAAA,CAAA,gBAAAA,CAAA,WAAAA,CAAA,yBAAAC,MAAA,IAAAD,CAAA,CAAAG,WAAA,KAAAF,MAAA,IAAAD,CAAA,KAAAC,MAAA,CAAAG,SAAA,qBAAAJ,CAAA,KAAAD,OAAA,CAAAC,CAAA;AAEtD,IAAMK,iBAAiB,GAAG,SAApBA,iBAAiBA,CACrBC,MAAoC,EACpCC,QAAgC,EACvB;EACT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAyB,CAAC;EAEpD,IAAAC,gBAAS,EAAC,YAAM;IACdF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAAK,kCAAsB,EAAC,YAAM;IAC3B,IAAIC,OAAO;IACX,IAAId,OAAA,CAAOO,MAAM,MAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDO,OAAO,GAAGP,MAAM,YAAYQ,OAAO,GAAGR,MAAM,GAAGA,MAAM,CAACK,OAAO;IAC/D;IAEA,IAAI,CAACE,OAAO,EAAE,OAAO;MAAA,OAAME,SAAS;IAAA;IAEpC,IAAMC,aAAqC,GAAG,SAAxCA,aAAqCA,CAAIC,OAAO,EAAEC,QAAQ,EAAK;MACnE,IAAI,CAACV,WAAW,CAACG,OAAO,EAAE;MAC1BH,WAAW,CAACG,OAAO,CAACM,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAMC,cAAc,GAAG,IAAIC,kCAAc,CAACJ,aAAa,CAAC;IACxDG,cAAc,CAACE,OAAO,CAACR,OAAO,CAAC;IAE/B,OAAO;MAAA,OAAMM,cAAc,CAACG,SAAS,CAACT,OAAO,CAAC;IAAA;EAChD,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;AACd,CAAC;AAAC,IAAAiB,QAAA,GAAAC,OAAA,cAEanB,iBAAiB","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useBrowserLayoutEffect","useEffect","useRef","ResizeObserver","useResizeObserver","target","listener","listenerRef","current","element","Element","undefined","eventListener","entries","observer","resizeObserver","observe","unobserve"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,sCAAsC;AACzE,SAAoBC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACpD,OAAOC,cAAc,MAAM,0BAA0B;AAErD,MAAMC,iBAAiB,GAAGA,CACxBC,MAAoC,EACpCC,QAAgC,KACvB;EACT,MAAMC,WAAW,GAAGL,MAAM,CAAyB,CAAC;EAEpDD,SAAS,CAAC,MAAM;IACdM,WAAW,CAACC,OAAO,GAAGF,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEdN,sBAAsB,CAAC,MAAM;IAC3B,IAAIS,OAAO;IACX,IAAI,OAAOJ,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDI,OAAO,GAAGJ,MAAM,YAAYK,OAAO,GAAGL,MAAM,GAAGA,MAAM,CAACG,OAAO;IAC/D;IAEA,IAAI,CAACC,OAAO,EAAE,OAAO,MAAME,SAAS;IAEpC,MAAMC,aAAqC,GAAGA,CAACC,OAAO,EAAEC,QAAQ,KAAK;MACnE,IAAI,CAACP,WAAW,CAACC,OAAO,EAAE;MAC1BD,WAAW,CAACC,OAAO,CAACK,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,MAAMC,cAAc,GAAG,IAAIZ,cAAc,CAACS,aAAa,CAAC;IACxDG,cAAc,CAACC,OAAO,CAACP,OAAO,CAAC;IAE/B,OAAO,MAAMM,cAAc,CAACE,SAAS,CAACR,OAAO,CAAC;EAChD,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;AACd,CAAC;AAED,eAAeD,iBAAiB"}
+{"version":3,"file":"index.js","names":["useBrowserLayoutEffect","useEffect","useRef","ResizeObserver","useResizeObserver","target","listener","listenerRef","current","element","Element","undefined","eventListener","entries","observer","resizeObserver","observe","unobserve"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,sCAAsC;AACzE,SAAoBC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACpD,OAAOC,cAAc,MAAM,0BAA0B;AAErD,MAAMC,iBAAiB,GAAGA,CACxBC,MAAoC,EACpCC,QAAgC,KACvB;EACT,MAAMC,WAAW,GAAGL,MAAM,CAAyB,CAAC;EAEpDD,SAAS,CAAC,MAAM;IACdM,WAAW,CAACC,OAAO,GAAGF,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEdN,sBAAsB,CAAC,MAAM;IAC3B,IAAIS,OAAO;IACX,IAAI,OAAOJ,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDI,OAAO,GAAGJ,MAAM,YAAYK,OAAO,GAAGL,MAAM,GAAGA,MAAM,CAACG,OAAO;IAC/D;IAEA,IAAI,CAACC,OAAO,EAAE,OAAO,MAAME,SAAS;IAEpC,MAAMC,aAAqC,GAAGA,CAACC,OAAO,EAAEC,QAAQ,KAAK;MACnE,IAAI,CAACP,WAAW,CAACC,OAAO,EAAE;MAC1BD,WAAW,CAACC,OAAO,CAACK,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,MAAMC,cAAc,GAAG,IAAIZ,cAAc,CAACS,aAAa,CAAC;IACxDG,cAAc,CAACC,OAAO,CAACP,OAAO,CAAC;IAE/B,OAAO,MAAMM,cAAc,CAACE,SAAS,CAACR,OAAO,CAAC;EAChD,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;AACd,CAAC;AAED,eAAeD,iBAAiB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-resize-observer",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -23,18 +23,18 @@
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
-    "build": "yarn clean && npm-run-all build:*",
+    "build": "yarn clean && npm-run-all 'build:*'",
     "ncu": "ncu -u"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-browser-layout-effect": "^1.0.18",
+    "@os-design/use-browser-layout-effect": "^1.0.20",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "f838bd8885cdaf45e62a3b61fa2f83f2d2036e09"
+  "gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
 }

package/src/index.mdx

@@ -0,0 +1,75 @@
+import { Meta } from '@storybook/blocks';
+import UseResizeObserverExample from './index.example';
+
+<Meta title='Utils/useResizeObserver' />
+
+# useResizeObserver
+
+Sets the listener that will be called whenever the resize event of an element occurs.
+
+## Example of usage
+
+```tsx
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import styled from '@emotion/styled';
+import { useResizeObserver } from '@os-design/utils';
+
+const getRandomInt = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min + 1) + min);
+
+const Container = styled.div`
+  background-color: hsl(0, 0%, 90%);
+  width: 10em;
+`;
+
+const UseResizeObserverExample: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>();
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [numberOfWords, setNumberOfWords] = useState(10);
+
+  // Change the content of the container every second
+  useEffect(() => {
+    const interval = setInterval(
+      () => setNumberOfWords(getRandomInt(5, 30)),
+      1000
+    );
+    return () => clearInterval(interval);
+  }, []);
+
+  const updateContainerSize = useCallback(() => {
+    setSize({
+      width: containerRef.current?.clientWidth,
+      height: containerRef.current?.clientHeight,
+    });
+  }, []);
+
+  // Detect container size on mount
+  useLayoutEffect(() => {
+    updateContainerSize();
+  }, [updateContainerSize]);
+
+  // Detect container size on resize
+  useResizeObserver(containerRef, updateContainerSize);
+
+  return (
+    <>
+      <Container ref={containerRef}>
+        {'Text '.repeat(numberOfWords).trimRight()}
+      </Container>
+      <p>
+        Size: {size.width}x{size.height}
+      </p>
+    </>
+  );
+};
+
+export default UseResizeObserverExample;
+```
+
+<UseResizeObserverExample />