use-popper - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist-node/index.js

@@ -198,3 +198,2 @@ 'use strict';
   return {
-    placement: popperStyles.placement,
     referrence: {
@@ -205,3 +204,4 @@ ref: referrenceRef
       ref: popperRef,
-      styles: popperStyles.popperStyles
+      styles: popperStyles.popperStyles,
+      placement: popperStyles.placement
     },
@@ -208,0 +208,0 @@ arrow: {

dist-src/index.js

@@ -64,3 +64,2 @@ import Popper from 'popper.js';
   return {
-    placement: popperStyles.placement,
     referrence: {
@@ -71,3 +70,4 @@ ref: referrenceRef
       ref: popperRef,
-      styles: popperStyles.popperStyles
+      styles: popperStyles.popperStyles,
+      placement: popperStyles.placement
     },
@@ -74,0 +74,0 @@ arrow: {

dist-types/index.d.ts

 import Popper from 'popper.js';
 import React from 'react';
-export interface Options {
+interface Options {
     placement?: Popper.Placement;
@@ -10,3 +10,2 @@ positionFixed?: boolean;
 declare function usePopper({ placement, positionFixed, eventsEnabled, modifiers, }: Options): {
-    placement: Popper.Placement;
     referrence: {
@@ -18,2 +17,3 @@ ref: React.Dispatch<React.SetStateAction<Element | null>>;
         styles: React.CSSProperties;
+        placement: Popper.Placement;
     };
@@ -20,0 +20,0 @@ arrow: {

dist-web/index.js

@@ -195,3 +195,2 @@ import Popper from 'popper.js';
   return {
-    placement: popperStyles.placement,
     referrence: {
@@ -202,3 +201,4 @@ ref: referrenceRef
       ref: popperRef,
-      styles: popperStyles.popperStyles
+      styles: popperStyles.popperStyles,
+      placement: popperStyles.placement
     },
@@ -205,0 +205,0 @@ arrow: {

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": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
@@ -32,3 +32,3 @@ "esnext": "dist-src/index.js",
     "@pika/plugin-standard-pkg": "0.3.14",
-    "@types/react": "16.8.8",
+    "@types/react": "16.8.9",
     "react": "16.8.5",
@@ -35,0 +35,0 @@ "react-dom": "16.8.5",

README.md

@@ -7,3 +7,3 @@ # Use Popper
 
-[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/81jr0v9qy9?fontsize=14)
+[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzkm04xqw8?fontsize=14)
 
@@ -15,20 +15,26 @@ ```js
 
-function useTooltip(props) {
-  const { placement, referrence, popper, arrow } = usePopper({
-    placement: props.placement,
-  });
+function Tooltip(props) {
+  const { referrence, popper, arrow } = usePopper({ placement: 'bottom' });
   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 (
+    <div>
+      <button ref={referrence.ref} {...bind}>
+        hover me
+      </button>
+      {active && (
+        <div
+          ref={popper.ref}
+          style={popper.styles}
+          data-placement={popper.placement}
+        >
+          <div>Hello!</div>
+          <div ref={arrow.ref} style={arrow.styles} />
+        </div>
+      )}
+    </div>
+  );
+}
 
-  return [Tooltip, { ...referrence, ...bind }];
-};
-
-export default useTooltip;
+export default Tooltip;
 ```

No alert changes

Improved metrics

Total package byte prevSize

17687

0.33%

Number of lines in readme file

39

18.18%

No dependency changes