@rehooks/component-size - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.js

		@@ -26,7 +26,19 @@ 'use strict'
		handleResize()
		window.addEventListener('resize', handleResize)

		return () => {
		window.removeEventListener('resize', handleResize)
		if (ResizeObserver) {
		let resizeObserver = new ResizeObserver(() => handleResize())
		resizeObserver.observe(ref.current)

		return () => {
		resizeObserver.disconnect(ref.current)
		resizeObserver = null
		}
		} else {
		window.addEventListener('resize', handleResize)

		return () => {
		window.removeEventListener('resize', handleResize)
		}
		}

		}, [])
		@@ -33,0 +45,0 @@

package.json

		{
		"name": "@rehooks/component-size",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "React hook for component-size",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -36,1 +36,53 @@ # `@rehooks/component-size`
		```

		## ResizeObserver

		[Resize Observer](https://developers.google.com/web/updates/2016/10/resizeobserver)
		is the API is used to determine if an element is resized. Browser support is pretty good in Chrome, but is still missing support in other major browsers.

		> [Can i use ResizeObserver?](https://caniuse.com/#feat=ResizeObserver)

		### Polyfill

		You can import the
		[polyfill](https://github.com/que-etc/resize-observer-polyfill) directly from here

		```sh
		yarn add resize-observer-polyfill
		```

		Then import it in your app:

		```js
		import 'resize-observer-polyfill'
		```

		If you are using Webpack (or similar) you could use [dynamic
		imports](https://webpack.js.org/api/module-methods/#import-), to load the
		Polyfill only if needed. A basic implementation could look something like this:

		```js
		loadPolyfills()
		.then(() => /* Render React application now that your Polyfills are ready */)

		/**
		* Do feature detection, to figure out which polyfills needs to be imported.
		**/
		function loadPolyfills() {
		const polyfills = []

		if (!supportsResizeObserver()) {
		polyfills.push(import('resize-observer-polyfill'))
		}

		return Promise.all(polyfills)
		}

		function supportsResizeObserver() {
		return (
		'ResizeObserver' in global &&
		'ResizeObserverEntry' in global &&
		'contentRect' in ResizeObserverEntry.prototype
		)
		}
		```

New alerts