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.3KB

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