use-popper - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

dist-node/index.js

@@ -9,3 +9,3 @@ 'use strict';
 var React = _interopDefault(require('react'));
-var isEqual = _interopDefault(require('react-fast-compare'));
+var useDeepCompareEffect = _interopDefault(require('use-deep-compare-effect'));
 
@@ -84,15 +84,2 @@ 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 = {
@@ -107,16 +94,16 @@ position: 'absolute',
 function usePopperState(placement) {
-  const _useStyles = useStyles(popperStyles),
-        _useStyles2 = _slicedToArray(_useStyles, 2),
-        currentPopperStyles = _useStyles2[0],
-        setPopperStyles = _useStyles2[1];
+  const _React$useState = React.useState(popperStyles),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        currentPopperStyles = _React$useState2[0],
+        setPopperStyles = _React$useState2[1];
 
-  const _useStyles3 = useStyles({}),
-        _useStyles4 = _slicedToArray(_useStyles3, 2),
-        currentArrowStyles = _useStyles4[0],
-        setArrowStyles = _useStyles4[1];
+  const _React$useState3 = React.useState({}),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        currentArrowStyles = _React$useState4[0],
+        setArrowStyles = _React$useState4[1];
 
-  const _React$useState = React.useState(placement),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        currentPlacement = _React$useState2[0],
-        setPlacement = _React$useState2[1];
+  const _React$useState5 = React.useState(placement),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        currentPlacement = _React$useState6[0],
+        setPlacement = _React$useState6[1];
 
@@ -168,3 +155,3 @@ const setState = React.useCallback(data => {
 
-  React.useEffect(() => {
+  useDeepCompareEffect(() => {
     if (popperInstance.current !== null) {
@@ -199,3 +186,3 @@ popperInstance.current.destroy();
     };
-  }, [arrowNode, referrenceNode, popperNode, placement, positionFixed, modifiers]);
+  }, [popperInstance, arrowNode, referrenceNode, popperNode, placement, positionFixed, modifiers]);
   React.useEffect(() => {
@@ -209,3 +196,3 @@ if (popperInstance.current === null) return;
     }
-  }, [eventsEnabled]);
+  }, [popperInstance, eventsEnabled]);
   React.useEffect(() => {
@@ -215,3 +202,3 @@ if (popperInstance.current !== null) {
     }
-  });
+  }, [popperInstance]);
   return {
@@ -218,0 +205,0 @@ placement: popperStyles.placement,

dist-src/index.js

 import Popper from 'popper.js';
-import React from 'react';
+import React from 'react'; // @ts-ignore
+
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import usePopperState from "./usePopperState.js";
@@ -16,3 +18,3 @@
   const [arrowNode, arrowRef] = React.useState(null);
-  React.useEffect(() => {
+  useDeepCompareEffect(() => {
     if (popperInstance.current !== null) {
@@ -47,3 +49,3 @@ popperInstance.current.destroy();
     };
-  }, [arrowNode, referrenceNode, popperNode, placement, positionFixed, modifiers]);
+  }, [popperInstance, arrowNode, referrenceNode, popperNode, placement, positionFixed, modifiers]);
   React.useEffect(() => {
@@ -57,3 +59,3 @@ if (popperInstance.current === null) return;
     }
-  }, [eventsEnabled]);
+  }, [popperInstance, eventsEnabled]);
   React.useEffect(() => {
@@ -63,3 +65,3 @@ if (popperInstance.current !== null) {
     }
-  });
+  }, [popperInstance]);
   return {
@@ -66,0 +68,0 @@ placement: popperStyles.placement,

dist-src/usePopperState.js

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

dist-web/index.js

 import Popper from 'popper.js';
 import React from 'react';
-import isEqual from 'react-fast-compare';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 
@@ -77,15 +77,2 @@ 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 = {
@@ -100,16 +87,16 @@ position: 'absolute',
 function usePopperState(placement) {
-  const _useStyles = useStyles(popperStyles),
-        _useStyles2 = _slicedToArray(_useStyles, 2),
-        currentPopperStyles = _useStyles2[0],
-        setPopperStyles = _useStyles2[1];
+  const _React$useState = React.useState(popperStyles),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        currentPopperStyles = _React$useState2[0],
+        setPopperStyles = _React$useState2[1];
 
-  const _useStyles3 = useStyles({}),
-        _useStyles4 = _slicedToArray(_useStyles3, 2),
-        currentArrowStyles = _useStyles4[0],
-        setArrowStyles = _useStyles4[1];
+  const _React$useState3 = React.useState({}),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        currentArrowStyles = _React$useState4[0],
+        setArrowStyles = _React$useState4[1];
 
-  const _React$useState = React.useState(placement),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        currentPlacement = _React$useState2[0],
-        setPlacement = _React$useState2[1];
+  const _React$useState5 = React.useState(placement),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        currentPlacement = _React$useState6[0],
+        setPlacement = _React$useState6[1];
 
@@ -164,3 +151,3 @@ const setState = React.useCallback(data => {
 
-  React.useEffect(() => {
+  useDeepCompareEffect(() => {
     if (popperInstance.current !== null) {
@@ -195,3 +182,3 @@ popperInstance.current.destroy();
     };
-  }, [arrowNode, referrenceNode, popperNode, placement, positionFixed, modifiers]);
+  }, [popperInstance, arrowNode, referrenceNode, popperNode, placement, positionFixed, modifiers]);
   React.useEffect(() => {
@@ -205,3 +192,3 @@ if (popperInstance.current === null) return;
     }
-  }, [eventsEnabled]);
+  }, [popperInstance, eventsEnabled]);
   React.useEffect(() => {
@@ -211,3 +198,3 @@ if (popperInstance.current !== null) {
     }
-  });
+  }, [popperInstance]);
   return {
@@ -214,0 +201,0 @@ placement: popperStyles.placement,

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.3",
+  "version": "1.0.0",
   "license": "MIT",
@@ -19,3 +19,3 @@ "esnext": "dist-src/index.js",
     "popper.js": "1.14.7",
-    "react-fast-compare": "2.0.4"
+    "use-deep-compare-effect": "1.1.0"
   },
@@ -28,3 +28,3 @@ "peerDependencies": {
     "@babel/preset-typescript": "7.3.3",
-    "@pika/pack": "0.3.5",
+    "@pika/pack": "0.3.6",
     "@pika/plugin-build-node": "0.3.14",
@@ -37,4 +37,4 @@ "@pika/plugin-build-types": "0.3.14",
     "react-dom": "16.8.5",
-    "typescript": "3.3.3333"
+    "typescript": "3.3.4000"
   }
 }

README.md

@@ -6,1 +6,28 @@ # Use Popper
 ![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)
+
+[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/81jr0v9qy9?fontsize=14)
+
+```js
+import React from 'react';
+import usePopper from 'use-popper';
+import { useHover } from 'use-events';
+
+function useTooltip(props) {
+  const { placement, referrence, popper, arrow } = usePopper({
+    placement: props.placement,
+  });
+  const [active, bind] = useHover();
+
+  const Tooltip = message =>
+    active ? (
+      <div ref={popper.ref} style={popper.styles} data-placement={placement}>
+        <div>{message}</div>
+        <div ref={arrow.ref} style={arrow.styles} />
+      </div>
+    ) : null;
+
+  return [Tooltip, { ...referrence, ...bind }];
+};
+
+export default useTooltip;
+```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

-50%

Number of lines in readme file

33

450%

Worsened metrics

Total package byte prevSize

17628

-1.95%

Number of package files

8

-20%

Lines of code

496

-6.42%

Dependency changes

• + Added

  use-deep-compare-effect@1.1.0

• + Added

  @babel/runtime@7.27.1
  (transitive)

• + Added

  dequal@1.0.1
  (transitive)

• + Added

  use-deep-compare-effect@1.1.0
  (transitive)

• - Removed

  react-fast-compare@2.0.4

• - Removed

  react-fast-compare@2.0.4
  (transitive)