@reach/rect - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

es/index.js

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		import React from "react";
		import React, { useRef, useState, useLayoutEffect } from "react";
		import Component from "@reach/component-component";
		@@ -79,2 +79,24 @@ import observeRect from "@reach/observe-rect";

		export function useRect(nodeRef) {
		var observe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

		var _useState = useState(null),
		rect = _useState[0],
		setRect = _useState[1];

		var observerRef = useRef(null);
		useLayoutEffect(function () {
		if (!observerRef.current) {
		observerRef.current = observeRect(nodeRef.current, setRect);
		}
		if (observe) {
		observerRef.current.observe();
		}
		return function () {
		return observerRef.current.unobserve();
		};
		}, [observe]);
		return rect;
		}

		export default Rect;

index.js

		@@ -7,2 +7,4 @@ "use strict";

		exports.useRect = useRect;

		var _react = require("react");
		@@ -95,2 +97,24 @@

		function useRect(nodeRef) {
		var observe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

		var _useState = (0, _react.useState)(null),
		rect = _useState[0],
		setRect = _useState[1];

		var observerRef = (0, _react.useRef)(null);
		(0, _react.useLayoutEffect)(function () {
		if (!observerRef.current) {
		observerRef.current = (0, _observeRect2.default)(nodeRef.current, setRect);
		}
		if (observe) {
		observerRef.current.observe();
		}
		return function () {
		return observerRef.current.unobserve();
		};
		}, [observe]);
		return rect;
		}

		exports.default = Rect;

package.json

		{
		"name": "@reach/rect",
		"version": "0.1.2",
		"version": "0.2.0",
		"description": "Measure React elements position in the DOM",
		@@ -13,3 +13,3 @@ "main": "index.js",
		"dependencies": {
		"@reach/component-component": "^0.1.2",
		"@reach/component-component": "^0.1.3",
		"@reach/observe-rect": "^1.0.3"
		@@ -19,4 +19,4 @@ },
		"prop-types": "^15.6.2",
		"react": "^16.4.0",
		"react-dom": "^16.4.0"
		"react": "^16.8.0",
		"react-dom": "^16.8.0"
		},
		@@ -23,0 +23,0 @@ "author": "",

src/index.js

		@@ -1,2 +0,2 @@
		import React from "react";
		import React, { useRef, useState, useLayoutEffect } from "react";
		import Component from "@reach/component-component";
		@@ -62,2 +62,17 @@ import observeRect from "@reach/observe-rect";

		export function useRect(nodeRef, observe = true) {
		let [rect, setRect] = useState(null);
		let observerRef = useRef(null);
		useLayoutEffect(() => {
		if (!observerRef.current) {
		observerRef.current = observeRect(nodeRef.current, setRect);
		}
		if (observe) {
		observerRef.current.observe();
		}
		return () => observerRef.current.unobserve();
		}, [observe]);
		return rect;
		}

		export default Rect;

New alerts