use-popper - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist-node/index.js

@@ -9,2 +9,3 @@ 'use strict';
 var React = _interopDefault(require('react'));
+var isEqual = _interopDefault(require('react-fast-compare'));
 
@@ -83,2 +84,15 @@ function _defineProperty(obj, key, value) {
 
+function useStyles(initialValue) {
+  const _React$useState = React.useState(initialValue),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        styles = _React$useState2[0],
+        setState = _React$useState2[1];
+
+  const setStyles = React.useCallback(value => {
+    const next = value instanceof Function ? value(styles) : value;
+    setState(prev => isEqual(prev, next) ? prev : next);
+  }, [styles]);
+  return [styles, setStyles];
+}
+
 const popperStyles = {
@@ -93,16 +107,16 @@ position: 'absolute',
 function usePopperState(placement) {
-  const _React$useState = React.useState(popperStyles),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        currentPopperStyles = _React$useState2[0],
-        setPopperStyles = _React$useState2[1];
+  const _useStyles = useStyles(popperStyles),
+        _useStyles2 = _slicedToArray(_useStyles, 2),
+        currentPopperStyles = _useStyles2[0],
+        setPopperStyles = _useStyles2[1];
 
-  const _React$useState3 = React.useState(),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        currentArrowStyles = _React$useState4[0],
-        setArrowStyles = _React$useState4[1];
+  const _useStyles3 = useStyles({}),
+        _useStyles4 = _slicedToArray(_useStyles3, 2),
+        currentArrowStyles = _useStyles4[0],
+        setArrowStyles = _useStyles4[1];
 
-  const _React$useState5 = React.useState(placement),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        currentPlacement = _React$useState6[0],
-        setPlacement = _React$useState6[1];
+  const _React$useState = React.useState(placement),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        currentPlacement = _React$useState2[0],
+        setPlacement = _React$useState2[1];
 
@@ -186,3 +200,3 @@ const setState = React.useCallback(data => {
   React.useEffect(() => {
-    if (!popperInstance.current) return;
+    if (popperInstance.current === null) return;
 
@@ -194,5 +208,5 @@ if (eventsEnabled) {
     }
-  }, [eventsEnabled, popperInstance.current]);
+  }, [eventsEnabled]);
   React.useEffect(() => {
-    if (popperInstance.current) {
+    if (popperInstance.current !== null) {
       popperInstance.current.scheduleUpdate();
@@ -199,0 +213,0 @@ }

dist-src/index.js

@@ -48,3 +48,3 @@ import Popper from 'popper.js';
   React.useEffect(() => {
-    if (!popperInstance.current) return;
+    if (popperInstance.current === null) return;
 
@@ -56,5 +56,5 @@ if (eventsEnabled) {
     }
-  }, [eventsEnabled, popperInstance.current]);
+  }, [eventsEnabled]);
   React.useEffect(() => {
-    if (popperInstance.current) {
+    if (popperInstance.current !== null) {
       popperInstance.current.scheduleUpdate();
@@ -61,0 +61,0 @@ }

dist-src/usePopperState.js

@@ -1,2 +0,3 @@
-import React from 'react'; // @ts-ignore
+import React from 'react';
+import useStyles from "./useStyles.js"; // @ts-ignore
 
@@ -12,4 +13,4 @@ const popperStyles = {
 function usePopperState(placement) {
-  const [currentPopperStyles, setPopperStyles] = React.useState(popperStyles);
-  const [currentArrowStyles, setArrowStyles] = React.useState();
+  const [currentPopperStyles, setPopperStyles] = useStyles(popperStyles);
+  const [currentArrowStyles, setArrowStyles] = useStyles({});
   const [currentPlacement, setPlacement] = React.useState(placement);
@@ -16,0 +17,0 @@ const setState = React.useCallback(data => {

dist-types/usePopperState.d.ts

@@ -5,4 +5,4 @@ import Popper from 'popper.js';
     popperStyles: CSSStyleDeclaration;
-    arrowStyles?: CSSStyleDeclaration;
+    arrowStyles?: CSSStyleDeclaration | {};
 }, (data: Popper.Data) => Popper.Data];
 export default usePopperState;

dist-web/index.js

 import Popper from 'popper.js';
 import React from 'react';
+import isEqual from 'react-fast-compare';
 
@@ -76,2 +77,15 @@ function _defineProperty(obj, key, value) {
 
+function useStyles(initialValue) {
+  const _React$useState = React.useState(initialValue),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        styles = _React$useState2[0],
+        setState = _React$useState2[1];
+
+  const setStyles = React.useCallback(value => {
+    const next = value instanceof Function ? value(styles) : value;
+    setState(prev => isEqual(prev, next) ? prev : next);
+  }, [styles]);
+  return [styles, setStyles];
+}
+
 const popperStyles = {
@@ -86,16 +100,16 @@ position: 'absolute',
 function usePopperState(placement) {
-  const _React$useState = React.useState(popperStyles),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        currentPopperStyles = _React$useState2[0],
-        setPopperStyles = _React$useState2[1];
+  const _useStyles = useStyles(popperStyles),
+        _useStyles2 = _slicedToArray(_useStyles, 2),
+        currentPopperStyles = _useStyles2[0],
+        setPopperStyles = _useStyles2[1];
 
-  const _React$useState3 = React.useState(),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        currentArrowStyles = _React$useState4[0],
-        setArrowStyles = _React$useState4[1];
+  const _useStyles3 = useStyles({}),
+        _useStyles4 = _slicedToArray(_useStyles3, 2),
+        currentArrowStyles = _useStyles4[0],
+        setArrowStyles = _useStyles4[1];
 
-  const _React$useState5 = React.useState(placement),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        currentPlacement = _React$useState6[0],
-        setPlacement = _React$useState6[1];
+  const _React$useState = React.useState(placement),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        currentPlacement = _React$useState2[0],
+        setPlacement = _React$useState2[1];
 
@@ -182,3 +196,3 @@ const setState = React.useCallback(data => {
   React.useEffect(() => {
-    if (!popperInstance.current) return;
+    if (popperInstance.current === null) return;
 
@@ -190,5 +204,5 @@ if (eventsEnabled) {
     }
-  }, [eventsEnabled, popperInstance.current]);
+  }, [eventsEnabled]);
   React.useEffect(() => {
-    if (popperInstance.current) {
+    if (popperInstance.current !== null) {
       popperInstance.current.scheduleUpdate();
@@ -195,0 +209,0 @@ }

package.json

 {
   "name": "use-popper",
   "description": "![npm](https://img.shields.io/npm/dt/use-popper.svg) ![npm](https://img.shields.io/npm/v/use-popper.svg) ![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
@@ -18,3 +18,4 @@ "esnext": "dist-src/index.js",
   "dependencies": {
-    "popper.js": "1.14.7"
+    "popper.js": "1.14.7",
+    "react-fast-compare": "2.0.4"
   },
@@ -21,0 +22,0 @@ "peerDependencies": {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17979

8.97%

Number of package files

10

25%

Lines of code

530

7.51%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

3

50%

Dependency changes

• + Added

  react-fast-compare@2.0.4

• + Added

  react-fast-compare@2.0.4
  (transitive)