use-element-resize
Version:
Detect element resize with hooks
80 lines • 3.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResizeObserver = void 0;
var react_1 = require("react");
var reducer_1 = require("./reducer");
var utils_1 = require("./utils");
function useResizeObserver(_a) {
var id = _a.id, _b = _a.onResize, onResize = _b === void 0 ? utils_1.noop : _b, _c = _a.onExit, onExit = _c === void 0 ? utils_1.noop : _c;
// Select the node that will be observed for mutations
var targetNode = document.getElementById(id) || document.body;
// Set up hooks
// setup state
var _d = (0, react_1.useReducer)(function (prev, next) { return (0, reducer_1.reducer)(prev, next); }, {
width: targetNode.offsetWidth,
height: targetNode.offsetHeight,
running: false
}), state = _d[0], setState = _d[1];
var width = state.width, height = state.height, running = state.running;
var _onResize = (0, react_1.useRef)(onResize);
_onResize.current = onResize;
var _onExit = (0, react_1.useRef)(onExit);
_onExit.current = onExit;
(0, react_1.useEffect)(function () {
// setup callbacks
var callOnResize = function (_a) {
var width = _a.width, height = _a.height, _ = _a.running;
return _onResize.current({ width: width, height: height });
};
var callbacks = [setState, callOnResize];
// Callback function to execute when mutations are observed
var raf;
function _onMutation() {
// if already running, avoid the payload
if (!running) {
// set as running
setState({ running: true });
if (window.requestAnimationFrame) {
raf = window.requestAnimationFrame(runCallbacks);
}
else {
raf = setTimeout(runCallbacks, 66);
}
}
}
function runCallbacks() {
// try to get the target the user wants
var _targetNode = document.getElementById(id) || document.body;
var offsetHeight = _targetNode.offsetHeight, offsetWidth = _targetNode.offsetWidth;
// run over the callbacks!
return callbacks.forEach(function (callback) {
return callback({ width: offsetWidth, height: offsetHeight, running: false });
});
}
// Create an observer instance linked to the callback function
var observer = new ResizeObserver(_onMutation);
// Start observing the target node for configured mutations
observer.observe(targetNode, { box: "border-box" });
// force an initial run!
_onMutation();
// Stop observing on unMount
return function () {
// clear any ungoing timers or rafs
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(raf);
}
else {
clearTimeout(raf);
}
// catch left over records
// disconnect
observer.disconnect();
// call onExit callback
_onExit.current({ width: width, height: height });
};
}, [setState]);
return [width, height];
}
exports.useResizeObserver = useResizeObserver;
exports.default = useResizeObserver;
//# sourceMappingURL=useResizeObserver.js.map