react-tiny-popover - npm Package Compare versions

Comparing version 6.0.1 to 6.0.2

dist/Popover.js

@@ -145,9 +145,12 @@ "use strict";
         var popoverElement = popoverRef.current;
-        var style = __assign(__assign({}, util_1.Constants.DEFAULT_CONTAINER_STYLE), containerStyle);
-        Object.assign(popoverElement.style, style);
+        if (popoverState.isPositioned) {
+            Object.assign(popoverElement.style, containerStyle);
+        }
         return function () {
-            Object.keys(style).forEach(function (key) { return (popoverElement.style[key] = null); });
+            Object.keys(containerStyle !== null && containerStyle !== void 0 ? containerStyle : {}).forEach(function (key) {
+                return (popoverElement.style[key] = null);
+            });
         };
-    }, [containerStyle, popoverRef]);
-    react_1.useEffect(function () {
+    }, [containerStyle, isOpen, popoverRef, popoverState.isPositioned]);
+    react_1.useLayoutEffect(function () {
         popoverRef.current.className = containerClassName;
@@ -154,0 +157,0 @@ }, [containerClassName, popoverRef]);

dist/util.js

@@ -7,5 +7,2 @@ "use strict";
     DEFAULT_ALIGN: 'center',
-    DEFAULT_CONTAINER_STYLE: {
-        transition: 'transform 0.04s ease-in',
-    },
     OBSERVER_THRESHOLDS: Array(1000)
@@ -12,0 +9,0 @@ .fill(null)

package.json

 {
   "name": "react-tiny-popover",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -40,3 +40,3 @@ - [Intro](#react-tiny-popover)
 ```JSX
-import Popover from 'react-tiny-popover'
+import { Popover } from 'react-tiny-popover'
 
@@ -47,3 +47,3 @@ ...
   isOpen={isPopoverOpen}
-  position={'top'} // preferred position
+  positions={['top', 'bottom', 'left', 'right']} // preferred positions by priority
   content={<div>Hi! I'm popover content.</div>}
@@ -58,3 +58,3 @@ >
 ```JSX
-import Popover from 'react-tiny-popover'
+import { Popover } from 'react-tiny-popover'
 
@@ -65,11 +65,11 @@ ...
   isOpen={isPopoverOpen}
-  position={['top', 'right', 'left', 'bottom']} // if you'd like, supply an array of preferred positions ordered by priority
+  position={['top', 'left']} // if you'd like, you can limit the positions
   padding={10} // adjust padding here!
-  disableReposition // prevents automatic readjustment of content position that keeps your popover content within your window's bounds
+  reposition={false} // prevents automatic readjustment of content position that keeps your popover content within its parent's bounds
   onClickOutside={() => setIsPopoverOpen(false)} // handle click events outside of the popover/target here!
-  content={({ position, nudgedLeft, nudgedTop, targetRect, popoverRect }) => ( // you can also provide a render function that injects some useful stuff!
+  content={({ position, nudgedLeft, nudgedTop }) => ( // you can also provide a render function that injects some useful stuff!
     <div>
-      <div>Hi! I'm popover content. Here's my position: {position}.</div>
-      <div>I'm {` ${nudgedLeft} `} pixels beyond the window horizontally!</div>
-      <div>I'm {` ${nudgedTop} `} pixels beyond the window vertically!</div>
+      <div>Hi! I'm popover content. Here's my current position: {position}.</div>
+      <div>I'm {` ${nudgedLeft} `} pixels beyond my boundary horizontally!</div>
+      <div>I'm {` ${nudgedTop} `} pixels beyond my boundary vertically!</div>
     </div>
@@ -83,15 +83,17 @@ )}
 ```JSX
-import Popover, { ArrowContainer } from 'react-tiny-popover'
+import { useRef } from 'react';
+import { Popover, ArrowContainer } from 'react-tiny-popover'
 
-...
+const clickMeButtonRef = useRef<HTMLButtonElement | undefined>();
 
 <Popover
   isOpen={isPopoverOpen}
-  position={['top', 'right', 'left', 'bottom']}
+  positions={['top', 'right', 'left', 'bottom']}
   padding={10}
   onClickOutside={() => setIsPopoverOpen(false)}
-  content={({ position, targetRect, popoverRect }) => (
+  ref={clickMeButtonRef} // if you'd like a ref to your popover's child, you can grab one here
+  content={({ position, childRect, popoverRect }) => (
     <ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
       position={position}
-      targetRect={targetRect}
+      childRect={targetRect}
       popoverRect={popoverRect}
@@ -101,2 +103,4 @@ arrowColor={'blue'}
       arrowStyle={{ opacity: 0.7 }}
+      className='popover-arrow-container'
+      arrowClassName='popover-arrow'
     >
@@ -112,7 +116,5 @@ <div
 >
-  {ref => ( // if you'd like access to the ref itself for some reason, you can provide a function as a child into which the ref will be injected
-    <div ref={ref} onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
-      Click me!
-    </div>
-  )}
+  <button onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+    Click me!
+  </button>
 </Popover>;
@@ -125,3 +127,3 @@ ```
 import React, { useState } from 'react';
-import Popover from 'react-tiny-popover';
+import { Popover } from 'react-tiny-popover';
 
@@ -128,0 +130,0 @@ interface CustomComponentProps extends React.ComponentPropsWithoutRef<'div'> {

No alert changes

Improved metrics

Total package byte prevSize

85748

increased by0.11%

Number of lines in readme file

302

increased by0.67%

No dependency changes