Musson Industrial's Embr-Periscope Module

3rd Party Modules
20

Portal Component

This update adds a Portal component, that uses React's createPortal to add children wherever you want them.

This allows you to:

  • Add elements inside existing components/views.
  • Decouple the design time structure of your views from the runtime structure of the HTML elements.
  • Develop re-usable views from the outside in.

Examples

Example, Basic Usage

This example demonstrates how the elements of the Portal are added to the target.

Example, Alert Information

This example shows a portal configured to add a warning border around the target element by using absolute positioning on the Portal's child elements

Example, Target onMount and onUnmount

This example uses the onMount and onUnmount callbacks to modify the properties of the target element, adding a border when mounted and removing a border when unmounted.

Element Selection

The element property can either be:

  1. A string containing the domId of the component/element you want to target.
  2. A JavaScript arrow function that returns an Element, allowing you to specify exactly where in the DOM you want to render your elements, even if it doesn't have an domId
5 Likes