1.0.4 • Published 2 years ago

resize-observer v1.0.4

Weekly downloads
49,130
License
Apache-2.0
Repository
github
Last release
2 years ago

resize-observer

Build Status NPM Version

npm bundle size (minified + gzip)

This library aims to be a faithful implementation and ponyfill of the Resize Observer draft. An optional polyfill option exists as well.

Installation

resize-observer is available on NPM and Yarn:

> npm install resize-observer
> yarn add resize-observer

Setup

As a ponyfill/module

resize-observer does not install itself by default. As such, you can import it like any other module:

import { ResizeObserver } from 'resize-observer';

const ro = new ResizeObserver(() => console.log('resize observed!'));
ro.observe(document.body);

As a polyfill

resize-observer provides a file that can be referenced from your browser that automatically installs ResizeObserver on the global window object. Both minified and non-minified versions exist, and are found in the package under the dist/ directory:

<script src="/node_modules/resize-observer/dist/resize-observer.js"></script>
<script type="text/javascript">
  const ro = new window.ResizeObserver(() => alert('Observing things is super cool!'));
  /* use your ResizeObserver! */
</script>

A install method is also provided to do the same within your own code:

import { install } from 'resize-observer';

install();

const ro = new window.ResizeObserver(() => alert('Observe all the things!'));
/* ... */

Note: Calling install will always overwrite window.ResizeObserver. If you'd like to only install resize-observer when it doesn't already exist, you can add a simple check before calling install:

import { install } from 'resize-observer';

if (!window.ResizeObserver) install();

/* ... */

TypeScript definitions

resize-observer is written in TypeScript. The definition files are included in the package and should be picked up automatically.

@elliemae/ds-form@typetura/corereact-flow-dnd@eroad/vue-cli-plugin-resize-observer-polyfillmedbelle-ui-v4medbelle-ui-v6alphakit-ui@linnworks/linn.core.clientrendition@everything-registry/sub-chunk-2656@andreisergiu98/amazon-chime-sdk-js@activfinancial/option-chain@activfinancial/time-series-chart@alphakits/ui@coderehab/greenzine-react-deprecated@beakerx/beakerx-tabledisplayconverteme-components@buckneri/web-componentscanvas-forms@giant-fe/workflow-designerolymcreact-dynamic-grid-systemreact-neonpixi-sveltezack-searchtypescript-react-table-customsitteneturstyled-container-queryrnl-vendor-mfernl-vendor-uiresporoot-fronttest-publish-lamluu-4@chax-at/amazon-chime-sdk-js@crpt/react-select@dims/scrollnav@aics/fms-file-explorer-coredb-web-basedbl-components@elliemae/ds-legacy-form@flexis/ui@dataartdev/uikit@jramineni/beakerx-tabledisplay@lxsmnsyc/indigo-player@nnno/manto-utils@nnno/manto-utils-v2@kubevious/ui-components@infologistics/frontend-libraries@piccollage/cbjs@pocketprep/ui-kit@pattern-x/gemini-viewer-ue-web@organisme/ui@overdose/components@orangesk/orange-design-system@raisenow/tamaro-core@rayvid/amazon-chime-sdk-js@talkfurther/elements@the-toucan/twclacront-core-components@sme.up/ketchup@vertexvis/viewermediafly-document-componentmanto-test-library@wallneradam/output_auto_scroll@wcd/anoblet.responsive-menuernie-amazon-chime-sdk-jsmjg_bundle_sdk_react@wrld/canvas-geometry-editormod-amazon-chime-sdk-jses-components@yangwch/y-componentsnetwork-policy-viewernext-grid-dndframework-entersol-webalphakit_v2amazon-chime-es-sdkamazon-chime-sdkamazon-chime-sdk-js
1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

5 years ago

1.0.0-alpha.1

6 years ago

1.0.0-alpha.0

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.4

7 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago