Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

useResizeObserver.js 1.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = useResizeObserver;
  4. var _react = require("react");
  5. var _useIsomorphicEffect = _interopRequireDefault(require("./useIsomorphicEffect"));
  6. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  7. var targetMap = new WeakMap();
  8. var resizeObserver;
  9. function getResizeObserver() {
  10. // eslint-disable-next-line no-return-assign
  11. return resizeObserver = resizeObserver || new window.ResizeObserver(function (entries) {
  12. entries.forEach(function (entry) {
  13. var handler = targetMap.get(entry.target);
  14. if (handler) handler(entry.contentRect);
  15. });
  16. });
  17. }
  18. /**
  19. * Efficiently observe size changes on an element. Depends on the `ResizeObserver` api,
  20. * and polyfills are needed in older browsers.
  21. *
  22. * ```ts
  23. * const [ref, attachRef] = useCallbackRef(null);
  24. *
  25. * const rect = useResizeObserver(ref);
  26. *
  27. * return (
  28. * <div ref={attachRef}>
  29. * {JSON.stringify(rect)}
  30. * </div>
  31. * )
  32. * ```
  33. *
  34. * @param element The DOM element to observe
  35. */
  36. function useResizeObserver(element) {
  37. var _useState = (0, _react.useState)(null),
  38. rect = _useState[0],
  39. setRect = _useState[1];
  40. (0, _useIsomorphicEffect.default)(function () {
  41. if (!element) return;
  42. getResizeObserver().observe(element);
  43. setRect(element.getBoundingClientRect());
  44. targetMap.set(element, function (rect) {
  45. setRect(rect);
  46. });
  47. return function () {
  48. targetMap.delete(element);
  49. };
  50. }, [element]);
  51. return rect;
  52. }