Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@juggle/resize-observer
Advanced tools
The @juggle/resize-observer package is a polyfill for the ResizeObserver API, which allows developers to observe changes to the size of DOM elements and react accordingly. It provides a way to receive notifications when an element's content rectangle has changed its size, which is useful for responsive designs and element-specific layout updates.
Observing size changes in elements
This feature allows you to create a new ResizeObserver instance and observe size changes in DOM elements. When a change is detected, the callback function is executed with the new size information.
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('Size changed:', entry.contentRect);
}
});
resizeObserver.observe(document.querySelector('.resizable-element'));
Unobserving elements
This feature allows you to stop observing size changes in a DOM element that was previously being observed by the ResizeObserver instance.
resizeObserver.unobserve(document.querySelector('.resizable-element'));
Disconnecting the observer
This feature allows you to completely disconnect the ResizeObserver instance, which stops observing all elements and clears its references, allowing for garbage collection.
resizeObserver.disconnect();
This package is another polyfill for the ResizeObserver API, similar to @juggle/resize-observer. It provides the same basic functionality, allowing developers to observe changes in the size of DOM elements.
This package is specifically designed for React and provides components and hooks to listen to resize events on DOM elements. It's a higher-level abstraction compared to @juggle/resize-observer, which is more general-purpose and not tied to a specific framework.
A polyfill entirely based on the current ResizeObserver Draft Specification.
This is currently a work in progress and should be used for testing only at this stage.
npm i @juggle/resize-observer
import ResizeObserver from '@juggle/resize-observer';
const resizeObserver = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
This will always use the polyfilled version of ResizeObserver, even if the browser supports ResizeObserver natively.
You can check to see if the native version is available and switch between this and the polyfill to improve porformance on browsers with native support.
import ResizeObserverPolyfill from '@juggle/resize-observer';
const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
const resizeObserver = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
display:none
is toggled (coming soon).FAQs
Polyfills the ResizeObserver API and supports box size options from the latest spec
The npm package @juggle/resize-observer receives a total of 0 weekly downloads. As such, @juggle/resize-observer popularity was classified as not popular.
We found that @juggle/resize-observer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.