react-uicomp - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

dist/animated/Hooks.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 interface UseAnimatedValueConfig {
@@ -20,2 +21,3 @@ onAnimationEnd?: (value: number) => void;
     scrollDirection: number;
+    isScrolling: boolean;
 };
@@ -33,6 +35,14 @@ export declare const useMeasure: () => {
 };
-export declare const useWindowDimension: () => {
+declare type useWindowDimensionMeasurement = {
     width: number;
     height: number;
 };
+export declare const useWindowDimension: () => useWindowDimensionMeasurement;
+export declare const useMouseMove: () => {
+    x: number;
+    y: number;
+    handler: {
+        ref: import("react").MutableRefObject<any>;
+    };
+};
 export {};

dist/index.js

@@ -784,6 +784,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-  var isScrolling = React.useRef(-1);
-  var scrollDirection = React.useRef(exports.ScrollState.UNDETERMINED);
-  var prevScrollY = React.useRef(0);
+  var _useState2 = React.useState(false),
+      isScrolling = _useState2[0],
+      setIsScrolling = _useState2[1];
 
+  var _isScrolling = React.useRef(-1);
+
+  var _scrollDirection = React.useRef(exports.ScrollState.UNDETERMINED);
+
+  var _prevScrollY = React.useRef(0);
+
   var scrollListener = function scrollListener() {
@@ -798,18 +804,20 @@ var _window = window,
 
-    if (isScrolling.current !== -1) {
-      clearTimeout(isScrolling.current);
+    if (_isScrolling.current !== -1) {
+      setIsScrolling(true);
+      clearTimeout(_isScrolling.current);
     }
 
-    isScrolling.current = setTimeout(function () {
-      scrollDirection.current = exports.ScrollState.UNDETERMINED;
+    _isScrolling.current = setTimeout(function () {
+      setIsScrolling(false);
+      _scrollDirection.current = exports.ScrollState.UNDETERMINED;
     }, 500);
-    var diff = pageYOffset - prevScrollY.current;
+    var diff = pageYOffset - _prevScrollY.current;
 
     if (diff > 0) {
-      scrollDirection.current = exports.ScrollState.DOWN;
+      _scrollDirection.current = exports.ScrollState.DOWN;
     } else {
-      scrollDirection.current = exports.ScrollState.UP;
+      _scrollDirection.current = exports.ScrollState.UP;
     }
 
-    prevScrollY.current = pageYOffset;
+    _prevScrollY.current = pageYOffset;
   };
@@ -824,3 +832,4 @@
   return _extends({}, scroll, {
-    scrollDirection: scrollDirection.current
+    scrollDirection: _scrollDirection.current,
+    isScrolling: isScrolling
   });
@@ -831,3 +840,3 @@ };
 
-  var _useState2 = React.useState({
+  var _useState3 = React.useState({
     left: 0,
@@ -840,4 +849,4 @@ top: 0,
   }),
-      measurement = _useState2[0],
-      setMeasurement = _useState2[1];
+      measurement = _useState3[0],
+      setMeasurement = _useState3[1];
 
@@ -881,10 +890,10 @@ React.useEffect(function () {
 var useWindowDimension = function useWindowDimension() {
-  var _useState3 = React.useState({
+  var _useState4 = React.useState({
     width: 0,
     height: 0
   }),
-      measurement = _useState3[0],
-      setMeasurement = _useState3[1];
+      measurement = _useState4[0],
+      setMeasurement = _useState4[1];
 
-  var _useState4 = React.useState(function () {
+  var _useState5 = React.useState(function () {
     return new ResizeObserver(function (_ref4) {
@@ -901,3 +910,3 @@ var entry = _ref4[0];
   }),
-      ro = _useState4[0];
+      ro = _useState5[0];
 
@@ -912,3 +921,41 @@ React.useEffect(function () {
 };
+var useMouseMove = function useMouseMove() {
+  var ref = React.useRef();
 
+  var _useState6 = React.useState({
+    x: 0,
+    y: 0
+  }),
+      pointerPosition = _useState6[0],
+      setPointerPosition = _useState6[1];
+
+  React.useEffect(function () {
+    var moveHandler = function moveHandler(event) {
+      setPointerPosition({
+        x: event.offsetX,
+        y: event.offsetY
+      });
+    };
+
+    if (ref.current) {
+      ref.current.addEventListener("mousemove", moveHandler);
+    } else {
+      document.addEventListener("mousemove", moveHandler);
+    }
+
+    return function () {
+      if (ref.current) {
+        ref.current.removeEventListener("mousemove", moveHandler);
+      } else {
+        document.removeEventListener("mousemove", moveHandler);
+      }
+    };
+  }, []);
+  return _extends({
+    handler: {
+      ref: ref
+    }
+  }, pointerPosition);
+};
+
 var AnimatedBlock = React__default.forwardRef(function (_ref, ref) {
@@ -1013,2 +1060,3 @@ var children = _ref.children,
 exports.useMeasure = useMeasure;
+exports.useMouseMove = useMouseMove;
 exports.useNavigation = useNavigation;
@@ -1015,0 +1063,0 @@ exports.useOutsideClick = useOutsideClick;

dist/index.modern.js

@@ -782,6 +782,12 @@ import React, { useContext, useMemo, useRef, useEffect, useState } from 'react';
 
-  var isScrolling = useRef(-1);
-  var scrollDirection = useRef(ScrollState.UNDETERMINED);
-  var prevScrollY = useRef(0);
+  var _useState2 = useState(false),
+      isScrolling = _useState2[0],
+      setIsScrolling = _useState2[1];
 
+  var _isScrolling = useRef(-1);
+
+  var _scrollDirection = useRef(ScrollState.UNDETERMINED);
+
+  var _prevScrollY = useRef(0);
+
   var scrollListener = function scrollListener() {
@@ -796,18 +802,20 @@ var _window = window,
 
-    if (isScrolling.current !== -1) {
-      clearTimeout(isScrolling.current);
+    if (_isScrolling.current !== -1) {
+      setIsScrolling(true);
+      clearTimeout(_isScrolling.current);
     }
 
-    isScrolling.current = setTimeout(function () {
-      scrollDirection.current = ScrollState.UNDETERMINED;
+    _isScrolling.current = setTimeout(function () {
+      setIsScrolling(false);
+      _scrollDirection.current = ScrollState.UNDETERMINED;
     }, 500);
-    var diff = pageYOffset - prevScrollY.current;
+    var diff = pageYOffset - _prevScrollY.current;
 
     if (diff > 0) {
-      scrollDirection.current = ScrollState.DOWN;
+      _scrollDirection.current = ScrollState.DOWN;
     } else {
-      scrollDirection.current = ScrollState.UP;
+      _scrollDirection.current = ScrollState.UP;
     }
 
-    prevScrollY.current = pageYOffset;
+    _prevScrollY.current = pageYOffset;
   };
@@ -822,3 +830,4 @@
   return _extends({}, scroll, {
-    scrollDirection: scrollDirection.current
+    scrollDirection: _scrollDirection.current,
+    isScrolling: isScrolling
   });
@@ -829,3 +838,3 @@ };
 
-  var _useState2 = useState({
+  var _useState3 = useState({
     left: 0,
@@ -838,4 +847,4 @@ top: 0,
   }),
-      measurement = _useState2[0],
-      setMeasurement = _useState2[1];
+      measurement = _useState3[0],
+      setMeasurement = _useState3[1];
 
@@ -879,10 +888,10 @@ useEffect(function () {
 var useWindowDimension = function useWindowDimension() {
-  var _useState3 = useState({
+  var _useState4 = useState({
     width: 0,
     height: 0
   }),
-      measurement = _useState3[0],
-      setMeasurement = _useState3[1];
+      measurement = _useState4[0],
+      setMeasurement = _useState4[1];
 
-  var _useState4 = useState(function () {
+  var _useState5 = useState(function () {
     return new ResizeObserver(function (_ref4) {
@@ -899,3 +908,3 @@ var entry = _ref4[0];
   }),
-      ro = _useState4[0];
+      ro = _useState5[0];
 
@@ -910,3 +919,41 @@ useEffect(function () {
 };
+var useMouseMove = function useMouseMove() {
+  var ref = useRef();
 
+  var _useState6 = useState({
+    x: 0,
+    y: 0
+  }),
+      pointerPosition = _useState6[0],
+      setPointerPosition = _useState6[1];
+
+  useEffect(function () {
+    var moveHandler = function moveHandler(event) {
+      setPointerPosition({
+        x: event.offsetX,
+        y: event.offsetY
+      });
+    };
+
+    if (ref.current) {
+      ref.current.addEventListener("mousemove", moveHandler);
+    } else {
+      document.addEventListener("mousemove", moveHandler);
+    }
+
+    return function () {
+      if (ref.current) {
+        ref.current.removeEventListener("mousemove", moveHandler);
+      } else {
+        document.removeEventListener("mousemove", moveHandler);
+      }
+    };
+  }, []);
+  return _extends({
+    handler: {
+      ref: ref
+    }
+  }, pointerPosition);
+};
+
 var AnimatedBlock = React.forwardRef(function (_ref, ref) {
@@ -995,3 +1042,3 @@ var children = _ref.children,
 
-export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, ScrollState, Theme, DefaultThemeConfig as ThemeConfig, binaryInterpolate, interpolate, useAnimatedValue, useAuth, useMeasure, useNavigation, useOutsideClick, useScroll, useTheme, useWindowDimension };
+export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, ScrollState, Theme, DefaultThemeConfig as ThemeConfig, binaryInterpolate, interpolate, useAnimatedValue, useAuth, useMeasure, useMouseMove, useNavigation, useOutsideClick, useScroll, useTheme, useWindowDimension };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-uicomp",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Utility library for creating complex routing with beautiful animated ui components.",
@@ -76,3 +76,2 @@ "author": "dipeshrai123",
     "react-spring": "^8.0.27",
-    "react-use-gesture": "^7.0.15",
     "resize-observer-polyfill": "^1.5.1",
@@ -79,0 +78,0 @@ "styled-components": "^5.1.1"

No alert changes

Improved metrics

Total package byte prevSize

206018

increased by3.99%

Dependency count

6

decreased by-14.29%

Lines of code

2101

increased by4.53%

Dependency changes

• - Removedreact-use-gesture@^7.0.15

• - Removedreact-use-gesture@7.0.16(transitive)