# Musson Industrial's Embr-Periscope Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [November 24, 2024, 10:26pm UTC](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047 "2024-11-24T22:26:31Z")\
**Posts on this page:** 1\
**Showing post:** 20

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [March 14, 2025, 10:37pm UTC](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047/20 "2025-03-14T22:37:37Z")

</div>

# Portal Component

> **[Release @embr-modules/periscope@0.6.0 · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fperiscope%400.6.0)**
>
> Minor Changes
> 
> dde1698: Add Portal component.
> 
> Patch Changes
> 
> Updated dependencies \[4709891\]
> Updated dependencies \[dde1698\]
> 
> @embr-modules/periscope-web@0.6.0

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`

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047)._