react-useportal - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/usePortal.d.ts

@@ -15,4 +15,2 @@ import { DOMAttributes, EventHandler, SyntheticEvent, MutableRefObject } from 'react';
     closeOnEsc?: boolean;
-    renderOnClickedElement?: boolean;
-    renderBelowClickedElement?: boolean;
     bindTo?: HTMLElement;
@@ -24,4 +22,4 @@ isOpen?: boolean;
 } & EventHandlers;
-export default function usePortal({ closeOnOutsideClick, closeOnEsc, renderOnClickedElement, renderBelowClickedElement, bindTo, // attach the portal to this node in the DOM
+export default function usePortal({ closeOnOutsideClick, closeOnEsc, bindTo, // attach the portal to this node in the DOM
 isOpen: defaultIsOpen, onOpen, onClose, ...eventHandlers }?: UsePortalOptions): any;
 export {};

dist/usePortal.js

@@ -22,4 +22,4 @@ "use strict";
 function usePortal(_a = {}) {
-    var { closeOnOutsideClick = true, closeOnEsc = true, renderOnClickedElement, renderBelowClickedElement, bindTo, // attach the portal to this node in the DOM
-    isOpen: defaultIsOpen = false, onOpen, onClose } = _a, eventHandlers = __rest(_a, ["closeOnOutsideClick", "closeOnEsc", "renderOnClickedElement", "renderBelowClickedElement", "bindTo", "isOpen", "onOpen", "onClose"]);
+    var { closeOnOutsideClick = true, closeOnEsc = true, bindTo, // attach the portal to this node in the DOM
+    isOpen: defaultIsOpen = false, onOpen, onClose } = _a, eventHandlers = __rest(_a, ["closeOnOutsideClick", "closeOnEsc", "bindTo", "isOpen", "onOpen", "onClose"]);
     const { isServer, isBrowser } = use_ssr_1.default();
@@ -49,5 +49,3 @@ const [isOpen, makeOpen] = react_1.useState(defaultIsOpen);
         // i.e. onClick, etc. inside usePortal({ onClick({ portal, targetEl }) {} })
-        const maybePortal = func({ portal, targetEl: targetEl.current, event });
-        if (maybePortal)
-            portal.current = maybePortal.current;
+        func({ portal, targetEl: targetEl.current, event });
     }, [portal, targetEl]);
@@ -73,19 +71,4 @@ const openPortal = react_1.useCallback((event) => {
             handleEvent(onOpen, event);
-        if (renderOnClickedElement && portal.current instanceof HTMLElement) {
-            portal.current.style.cssText = `
-        height: 0px;
-        position: absolute;
-        left: ${left}px;
-        top: ${top}px;
-      `;
-        }
-        else if (renderBelowClickedElement && portal.current instanceof HTMLElement) {
-            portal.current.style.cssText = `
-        position: absolute;
-        left: ${left};
-        top: ${top};
-      `;
-        }
         setOpen(true);
-    }, [isServer, portal, setOpen, renderBelowClickedElement, renderOnClickedElement, handleEvent, targetEl, onOpen]);
+    }, [isServer, portal, setOpen, handleEvent, targetEl, onOpen]);
     const closePortal = react_1.useCallback((event) => {
@@ -142,7 +125,7 @@ if (isServer)
     }, {});
-    return Object.assign([openPortal, closePortal, open.current, Portal, togglePortal], Object.assign(Object.assign({ isOpen: open.current, openPortal, onMouseDown: handleKeydown, ref: targetEl, closePortal,
+    return Object.assign([openPortal, closePortal, open.current, Portal, togglePortal], Object.assign(Object.assign({ isOpen: open.current, openPortal, ref: targetEl, closePortal,
         togglePortal,
-        Portal }, customEventHandlers), { bind: Object.assign({ onMouseDown: handleKeydown, ref: targetEl }, customEventHandlers) }));
+        Portal }, customEventHandlers), { bind: Object.assign({ ref: targetEl }, customEventHandlers) }));
 }
 exports.default = usePortal;
 //# sourceMappingURL=usePortal.js.map

package.json

 {
   "name": "react-useportal",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage": "https://codesandbox.io/s/w6jp7z4pkk",
@@ -5,0 +5,0 @@ "main": "dist/usePortal.js",

README.md

@@ -56,4 +56,5 @@ <p style="text-align: center;" align="center">
 - [Modal Example - Next.js - codesandbox container](https://codesandbox.io/s/useportal-in-nextjs-codesandbox-container-9rm5o) (sometimes buggy, if so try [this example](https://codesandbox.io/s/useportal-in-nextjs-ux9nb))
-- [Modal Example - create-react-app](https://codesandbox.io/s/w6jp7z4pkk)
+- [Modal Example (useModal) - create-react-app](https://codesandbox.io/s/w6jp7z4pkk)
 - [Dropdown Example (useDropdown) - Next.js](https://codesandbox.io/s/useportal-usedropdown-587fo)
+- [Tooltip Example (useTooltip) - Next.js](https://codesandbox.io/s/useportal-usedropdown-dgesf)
 
@@ -149,17 +150,37 @@
 ### Customizing the Portal directly
-By using `onOpen`, `onClose` or any other event handler, you can modify the `portal` and return it. See [useDropdown](https://codesandbox.io/s/useportal-usedropdown-587fo) for a working example. It's important that you pass the `event` object to `openPortal`.
+By using `onOpen`, `onClose` or any other event handler, you can modify the `Portal` and return it. See [useDropdown](https://codesandbox.io/s/useportal-usedropdown-587fo) for a working example. It's important that you pass the `event` object to `openPortal` otherwise you will need to attach a ref to the clicked element.
 
 ```jsx
-const App = () => {
-  const { openPortal, isOpen } = usePortal({
+const useModal = () => {
+  const { isOpen, togglePortal, closePortal, Portal } = usePortal({
     onOpen({ portal }) {
       portal.current.style.cssText = `
+        /* add your css here for the Portal */
         position: absolute;
-        /* add your custom styles here! */
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
       `
-      return portal
     }
   })
+
+  return {
+    Modal: Portal,
+    toggleModal: togglePortal,
+    closeModal: closePortal,
+    isOpen
+  }
+}
+
+const App = () => {
+  const { openModal, closeModal, isOpen, Modal } = useModal()
   
-  return <button onClick={e => openPortal(e)}>Click Me<button>
+  return <>
+    <button onClick={e => openModal(e)}>Open Modal<button>
+    {isOpen && (
+      <Modal>
+        This will dynamically center to the middle of the screen regardless of the size of what you put in here
+      </Modal>
+    )}
+  </>
 }
@@ -176,3 +197,2 @@ ```
 | `closeOnEsc`   | This will allow you to hit ESC and it will close the modal. Default is `true`    |
-| `renderBelowClickedElement` | This will put the portal right under the element that you click on. Great for dropdowns. Required to pass event to openPortal `onClick={event => openPortal(event)}` |
 | `bindTo` | This is the DOM node you want to attach the portal to. By default it attaches to `document.body` |
@@ -182,3 +202,3 @@ | `isOpen` | This will be the default for the portal. Default is `false` |
 | `onClose` | This is used to call something when the portal is closed and to modify the css of the portal directly |
-| html event handlers (i.e. `onClick`) | These can be used instead of `onOpen` to modify the css of the portal directly |
+| html event handlers (i.e. `onClick`) | These can be used instead of `onOpen` to modify the css of the portal directly. [`onMouseEnter` and `onMouseLeave` example](https://codesandbox.io/s/useportal-usedropdown-dgesf) |
 
@@ -192,7 +212,7 @@ ### Option Usage
   isOpen,
-  Portal
+  Portal,
+  ref, // if you don't pass an event to openPortal, closePortal, or togglePortal, you will need to put this on the element you want to interact with/click
 } = usePortal({
   closeOnOutsideClick: true,
   closeOnEsc: true,
-  renderBelowClickedElement, // appear directly under the clicked element/node in the DOM
   bindTo, // attach the portal to this node in the DOM
@@ -217,3 +237,2 @@ isOpen: false,
 - [ ] maybe have a `<Provider order={['Portal', 'openPortal']} />` then you can change the order of the array destructuring syntax
-- [ ] instead of having a `stateful` option, just make `usePortal` stateful, and allow `import { Portal } from 'react-useportal'`
 - [ ] make work without requiring the html synthetic event
@@ -220,0 +239,0 @@ - [ ] add example for tooltip (like [this one](https://codepen.io/davidgilbertson/pen/ooXVyw))

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

Number of lines in readme file

243

increased by8.48%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

24579

decreased by-3.44%

Lines of code

149

decreased by-11.31%

No dependency changes