{"library":"resize-observer-polyfill","title":"ResizeObserver Polyfill","description":"This package provides a robust polyfill for the W3C Resize Observer API, enabling consistent functionality across web browsers, including those without native support. Currently at stable version 1.5.1, the library maintains an active development pace, primarily focusing on bug fixes and minor enhancements, as evidenced by recent releases like 1.5.1 and 1.5.0. Its core strength lies in its non-polling observation strategy, which leverages MutationObserver with Mutation Events as a fallback, ensuring efficient performance without constant DOM checks. It differentiates itself by accurately following the Resize Observer specification, handling CSS transitions/animations, and observing changes from dynamic CSS pseudo-classes without modifying observed elements. The polyfill is lightweight, weighing only 2.44 KiB minified and gzipped, and is designed to be used as a ponyfill to prevent global object pollution.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install resize-observer-polyfill"],"cli":null},"imports":["import ResizeObserver from 'resize-observer-polyfill';","const { default: ResizeObserver } = require('resize-observer-polyfill');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import ResizeObserver from 'resize-observer-polyfill';\n\nconst ro = new ResizeObserver((entries, observer) => {\n    for (const entry of entries) {\n        const {left, top, width, height} = entry.contentRect;\n\n        console.log('Element:', entry.target);\n        console.log(`Element's size: ${ width }px x ${ height }px`);\n        console.log(`Element's paddings: ${ top }px ; ${ left }px`);\n    }\n});\n\n// Observe the document body for resize changes\nro.observe(document.body);\n\n// To stop observing later:\n// ro.unobserve(document.body);\n// To disconnect all observations:\n// ro.disconnect();","lang":"javascript","description":"This example demonstrates how to import and instantiate ResizeObserver, then observe the document body for dimension changes, logging the new size and padding information.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}