Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component ([react docs](https://reactjs.org/docs/portals.html)).
This hook is also isomorphic, meaning it works with SSR (server side rendering).
Features
--------
- SSR (server side rendering) support
- TypeScript support
- 1 dependency ([use-ssr](https://github.com/alex-cory/use-ssr))
- Built in state
### Examples
- [SSR 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 (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)
Installation
------------
```shell
yarn add react-useportal or npm i -S react-useportal
```
Usage
-----
### Stateless
```jsx
import usePortal from 'react-useportal'
const App = () => {
const { Portal } = usePortal()
return (
This text is portaled at the end of document.body!
)
}
const App = () => {
const { Portal } = usePortal({
bindTo: document && document.getElementById('san-francisco')
})
return (
This text is portaled into San Francisco!
)
}
```
### With State
```jsx
import usePortal from 'react-useportal'
const App = () => {
var { openPortal, closePortal, isOpen, Portal } = usePortal()
// want to use array destructuring? You can do that too
var [openPortal, closePortal, isOpen, Portal] = usePortal()
return (
<>
{isOpen && (
This Portal handles its own state.{' '}
, hit ESC or
click outside of me.
This Portal handles its own state.{' '}
, hit ESC or
click outside of me.
)
}
```
### 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. If opening the portal from a click event it's important that you pass the `event` object to `openPortal` and `togglePortal` otherwise you will need to attach a `ref` to the clicked element (if you want to be able to open the portal without passing an event you will need to set `programmaticallyOpen` to `true`).
```jsx
const useModal = () => {
const { isOpen, openPortal, togglePortal, closePortal, Portal } = usePortal({
onOpen({ portal }) {
portal.current.style.cssText = `
/* add your css here for the Portal */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
`
}
})
return {
Modal: Portal,
openModal: openPortal,
toggleModal: togglePortal,
closeModal: closePortal,
isOpen
}
}
const App = () => {
const { openModal, closeModal, isOpen, Modal } = useModal()
return <>
