Dimension Sentinel

Dimension Sentinel helps you detect when an element’s size changes.

1) Install

npm i @ambicuity/dimension-sentinel

2) Use

import { DimensionSentinel } from '@ambicuity/dimension-sentinel';

const sentinel = new DimensionSentinel((entries) => {
  for (const entry of entries) {
    const size = entry.contentBoxSize[0]; // { inlineSize, blockSize }
    console.log(size.inlineSize, size.blockSize);
  }
});

sentinel.observe(document.querySelector('#panel')!);

3) Main Methods

• new DimensionSentinel(callback)
• observe(target, options?)
• unobserve(target)
• disconnect()

4) Box Options

• content-box (default)
• border-box
• device-pixel-content-box

Example:

sentinel.observe(element, { box: 'border-box' });

5) Docs

• Quick guide: docs/getting-started/quickstart.md
• API: docs/api/reference.md
• Architecture: docs/architecture/runtime-architecture.md

6) Development

npm run lint
npm test
npm run build

License

MIT

Author

Author: Ritesh Rana
Email: [email protected]