@razorpay/blade
Version:
The Design System that powers Razorpay
36 lines (29 loc) • 1.17 kB
JavaScript
import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable consistent-return */
/**
* Hook to observe resize events on a given element
*/
var useResize = function useResize(ref, callback) {
useIsomorphicLayoutEffect(function () {
if (!ref.current) return;
var element = ref.current;
if (!('ResizeObserver' in window)) return;
var observer = new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
callback === null || callback === void 0 ? void 0 : callback(entry);
});
});
observer.observe(element);
// destroy the observer
return function () {
if (!('ResizeObserver' in window)) return;
observer === null || observer === void 0 ? void 0 : observer.disconnect();
};
}, [callback]);
};
// Overlapping color of surface.background.gray.subtle + interactive.background.gray.default
// TODO(future): design will tokenize or check if this is needed or not
var MIXED_BG_COLOR = '#e1e7ef';
export { MIXED_BG_COLOR, useResize };
//# sourceMappingURL=utils.js.map