Exploring HTMLPortalElement with React

HTMLPortalElement is a draft of a new HTML Element, very similar to iframes but with the big difference that it allows to navigate to the content of the “iframe” by using a page transition.

portal-preview-demo.gif

To know more about it, I recommend to read these references:

In this article, I will explain how to use this future feature to do a “Hello world” demo with React.

Getting started

First of all, to use this draft feature you’ll need Chrome Canary. Once you have it, activate the flag of Portals:

portal-flag.png

Next, we’ll test portals. Remember that portals need to be on the top level of our app (unlike it happens with iframes).

 

Hello world with HTMLPortalElement and React:

import React, { useState, useEffect, useRef } from 'react';
import { render } from 'react-dom';

function PortalExample() {
  if (!window.HTMLPortalElement) {
    return 'HTMLPortalElement is not supported in your browser.'
  }

  return (
    <portal
      src="https://www.aralroca.com"
    />
  );
}

render(<PortalExample />, document.getElementById('root'));

 

We get a similar result than using an iframe:

Clipboard - June 8, 2019 3_52 PM.png

Nevertheless, we want a beautiful transition to navigate to the content of this page. How could we get this?

Navigating to a portal

As I said, there is a significant difference between portals and iframes; with portals we can navigate to the content. In order to do that, the element has the function activate to go to the page.

<portal
  src="https://www.aralroca.com"
   // navigate to content
  onClick={({ target }) => target.activate()} 
/>

Now we can navigate to the content. Although without any transition… yet:

navigating.gif

Adding a page transition

Instead of calling the activate function on the onClick event, we are going to use the onClick event to add an extra css class with the transition. Then, we are going to use the onTransitionEnd event to control when the css transition is finished. After that, we’ll call the activate function.

Therefore, our css transition is going to scale the portal until the portal fits all the content of the page (width and height 100%).

React code:

import React, { useState } from 'react';
import { render } from 'react-dom';

import './style.css';

function PortalExample() {
  const [transition, setTransition] = useState(false)

  if (!window.HTMLPortalElement) {
    return 'HTMLPortalElement is not supported in your browser.'
  }

  return (
    <portal
      src="https://www.aralroca.com"
      className={`portal ${transition ? 'portal-reveal' : ''}`}
      onClick={() => setTransition(true)}
      onTransitionEnd={(e) => e.propertyName === 'transform' && e.target.activate()}
    />
  );
}

render(<PortalExample />, document.getElementById('root'));

 

Styles:

body {
  background-color: #212121;
}

.portal {
  position: fixed;
  width: 100%;
  cursor: pointer;
  height: 100%;
  transition: transform 0.4s;
  box-shadow: 0 0 20px 10px #999;
  transform: scale(0.4);
}

.portal.portal-reveal {
  transform: scale(1.0);
}

 

Finally, we get the page transition in our portal:

page-transition.gif

Code: https://github.com/aralroca/HTMLPortalElement-react-example

Benefits of portals

Portals are a new proposal to load pages as an iframe, allowing the navigation to the content with a beautiful transition and improving the user’s experience.

They can be useful for previews of videos / audio, so you can navigate to the content page without stop watching / listening the media at any moment.

preview.gif

Of course, here we are using a different origin (YouTube). Nevertheless, if we use the same origin, we can communicate with the portal at any moment and do things like displaying a beauty preview or loading the rest of the content after the portal is activated.

Conclusion

Portals are still a proposal and maybe it’s something we won’t see in the future. Whatever, if it finally exists, it’s going to be useful to preview content, especially, for media.

References:

One Comment on “Exploring HTMLPortalElement with React

  1. Retroenllaç: Exploring HTMLPortalElement with React – Javascript World

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out /  Canvia )

Google photo

Esteu comentant fent servir el compte Google. Log Out /  Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out /  Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out /  Canvia )

S'està connectant a %s

Aquest lloc utilitza Akismet per reduir els comentaris brossa. Apreneu com es processen les dades dels comentaris.

%d bloggers like this: