index.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. var $ksDzM$react = require("react");
  2. var $ksDzM$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
  3. function $parcel$export(e, n, v, s) {
  4. Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
  5. }
  6. $parcel$export(module.exports, "useSize", () => $d2c1d285af17635b$export$1ab7ae714698c4b8);
  7. function $d2c1d285af17635b$export$1ab7ae714698c4b8(element) {
  8. const [size, setSize] = $ksDzM$react.useState(undefined);
  9. $ksDzM$radixuireactuselayouteffect.useLayoutEffect(()=>{
  10. if (element) {
  11. // provide size as early as possible
  12. setSize({
  13. width: element.offsetWidth,
  14. height: element.offsetHeight
  15. });
  16. const resizeObserver = new ResizeObserver((entries)=>{
  17. if (!Array.isArray(entries)) return;
  18. // Since we only observe the one element, we don't need to loop over the
  19. // array
  20. if (!entries.length) return;
  21. const entry = entries[0];
  22. let width;
  23. let height;
  24. if ('borderBoxSize' in entry) {
  25. const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
  26. const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
  27. width = borderSize['inlineSize'];
  28. height = borderSize['blockSize'];
  29. } else {
  30. // for browsers that don't support `borderBoxSize`
  31. // we calculate it ourselves to get the correct border box.
  32. width = element.offsetWidth;
  33. height = element.offsetHeight;
  34. }
  35. setSize({
  36. width: width,
  37. height: height
  38. });
  39. });
  40. resizeObserver.observe(element, {
  41. box: 'border-box'
  42. });
  43. return ()=>resizeObserver.unobserve(element)
  44. ;
  45. } else // We only want to reset to `undefined` when the element becomes `null`,
  46. // not if it changes to another element.
  47. setSize(undefined);
  48. }, [
  49. element
  50. ]);
  51. return size;
  52. }
  53. //# sourceMappingURL=index.js.map