Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@juggle/resize-observer

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@juggle/resize-observer - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

2

package.json
{
"name": "@juggle/resize-observer",
"version": "0.5.1",
"version": "0.5.2",
"description": "ResizeObserver - Based on the official draft specification",

@@ -5,0 +5,0 @@ "main": "./lib/ResizeObserver.js",

@@ -8,3 +8,3 @@ # ResizeObserver

A ponyfill/polyfill entirely based on the current **ResizeObserver** [Draft Specification](https://wicg.github.io/ResizeObserver).
A minimal library which polyfills the **ResizeObserver** API and is entirely based on the current [Draft Specification](https://wicg.github.io/ResizeObserver).

@@ -21,3 +21,3 @@ This library observes elements and dispatches notifications when their dimensions change. Differences are only calculated during animation, or, after DOM mutation or user interaction has occurred, keeping CPU and power consumption minimal.

## Usage
## Basic Usage
``` js

@@ -35,3 +35,19 @@ import ResizeObserver from '@juggle/resize-observer';

## Watching Multiple Elements
``` js
import ResizeObserver from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const { width, height } = entry.contentRect;
console.log(`Element ${index + 1}:` `${width}x${height}`);
});
});
const els = docuent.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el)); // Watch everything!
```
## Switching between native and polyfilled versions

@@ -52,7 +68,9 @@

## TypeScript Support
## What's it good for?
- Building responsive websites.
- Creating 'self-aware' Web Components.
- Making 3rd party libraries more responsive. e.g. charts and grids.
- Many other things!
This library is written in TypeScript, however, it's compiled into JavaScript during release. Definition files are included in the package and should be picked up automatically to re-enable support in TypeScript projects.
## Limitations

@@ -62,2 +80,7 @@

- Dynamic stylesheet changes may not be noticed and updates will occur on the next user interaction.
- Currently no support for observations when `display:none` is toggled (coming soon).
- Currently no support for observations when `display:none` is toggled (coming soon).
## TypeScript Support
This library is written in TypeScript, however, it's compiled into JavaScript during release. Definition files are included in the package and should be picked up automatically to re-enable support in TypeScript projects.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc