use-portal

React hook wrapping the React Portals API.

Usage

1npm install use-portal

1import { usePortal } from 'use-portal'

usePortal Options

1interface UsePortalOptions {
2  /**
3   * Element the Portal is attached to.
4   *
5   * Defaults to `document.body`.
6   */
7  target?: HTMLElement
8  /**
9   * Element that wraps the child content of the Portal component.
10   *
11   * Defaults to `div`.
12   */
13  container?: HTMLElement
14  /**
15   * Defines where the Portal is inserted into the `target` element.
16   *
17   * Defaults to 'append'.
18   */
19  insertionOrder?: 'append' | 'prepend'
20}

usePortal ReturnType

1export interface UsePortalReturnType {
2  /**
3   * Portal component that renders child content into
4   * the `target` DOM element.
5   */
6  Portal: (props: PortalProps) => React.ReactPortal | null
7  /**
8   * Element the Portal is attached to.
9   *
10   * Defaults to `document.body`.
11   */
12  target: HTMLElement | null
13  /**
14   * Element that wraps the child content of the Portal component.
15   *
16   * Defaults to `div`.
17   */
18  container: HTMLElement | null
19}

Example: Simple Portal

Demo • Code Sandbox

1import { usePortal } from 'use-portal'
2
3function App() {
4  const { Portal } = usePortal()
5
6  const [clicks, setClicks] = React.useState(0)
7
8  function handleClick() {
9    // This will fire when the button in Child is clicked,
10    // updating Parent's state, even though button
11    // is not direct descendant in the DOM.
12    setClicks((prevClicks) => prevClicks + 1)
13  }
14
15  return (
16    <div onClick={handleClick}>
17      <h1>Parent {clicks}</h1>
18      <Portal>
19        <Child />
20      </Portal>
21    </div>
22  )
23}
24
25function Child() {
26  // The click event on this button will bubble up to parent,
27  // because there is no 'onClick' attribute defined
28  return (
29    <div>
30      <h2>Child</h2>
31      <button>Click</button>
32    </div>
33  )
34}