@lakca/onresize

1.1.0 • Public • Published

onresize

Listen on the change of HTML Element.

Build Status codecov

Usage

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

options.getSize [function=defaultGetSize]

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.

options.equal [function=defaultEqual]

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.

LICENSE

MIT

Readme

Keywords

Package Sidebar

Install

npm i @lakca/onresize

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

5.18 kB

Total Files

5

Last publish

Collaborators

  • lakcaorg