@slithy/portal NPM

@slithy/portal

A React portal.

Install the library with npm:

npm install @slithy/portal

Once installed, you may use the portal in your React components:

import { Portal } from '@slithy/portal'

const MyComponent = () => (
  <Portal>
    <p>Whatever you want in the portal ...</p>
  </Portal>
)

The portal accepts some optional props, shown below with their effective defaults.

<Portal
  attachment={(root, element) => {
    root.appendChild(element)
  }}
  element="div"
  id="portal"
>
  <p>I am content!</p>
</Portal>

The end result of this in the document would be:

<body>
  <!-- the document -->

  <div data-testid="portal" id="portal">
    <div>
      <p>I am content!</p>
    </div>
  </div>
</body>

Takes a callback that affects how the portal is attached to its parent element. By default, the portal is appended to its parent.

To prepend instead, use:

<Portal attachment={(root, element) => {
    root.prepend(element)
  }}
>...</Portal>

A div by default, the created element that wraps the Portal component's children.

For example:

<ul id="my-list"></ul>

<Portal element="li" id="my-list">
  A list item
</Portal>

... would result in:

<ul id="my-list">
  <li>A list item</li>
</ul>

The portal will query the document for this id, and will use the queried element as parent for the portal's contents.

If the id cannot be found, the portal will create a div with the given id, and will append it to the document body.

data-testid="portal" will be assigned to any div dynamically generated by the Portal component. On unmount of the Portal, these will be removed.

3 years ago

3 years ago

5 years ago

5 years ago