Listen on changes of element i

Listen on the change of HTML Element.

By default, listen on the size change of element.

const onresize = require('@lakca/onresize') onresize(document.body, size => { console.log(size.width) // offsetWidth console.log(size.height) // offsetHeight })

Change default triggering frame(30) interval.

onresize(document.body, { frame: 60 }, ...)

Custom getSize and equal to listen on changes of other properties.

onresize(document.body, { getSize(el) { const pos = el.getBoundingClientRect() return { x: el.top, y: el.left } }, equal(a, b) { return a.x === b.x && a.y === b.y } }, ...) API onresize(HTMLElement, [options], callback) options.frame [number: 30]

it uses window.requestAnimationFrame to conduct periodic detection of element changes.

The comparing operands are data retrieved in every adjacent triggering frame.

see window.requestAnimationFrame

function defaultGetSize(ele) { return { width: ele.offsetWidth, height: ele.offsetHeight } }

By default, the program listens on element layout size changing, you can provide options.getSize and options.equal to change retrieved data and comparing method, such as position of element.

function defaultEqual(one, other) { return one.width === other.width && one.height === other.height }

Also, you can listen on any change that is related to screen refreshing.

MIT