Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-useportal
Advanced tools
react-useportal - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -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 {}; |
@@ -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 |
| { | ||
| "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", |
@@ -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)) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
- increased by8.48%
243
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-3.44%
24579
- Lines of code
- decreased by-11.31%
149
No dependency changes