Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 28, 2019 03:37 pm GMT

React Portals are lit

Recently I was introduced to Reacts' createPortal API, which was nothing short of amazing.

Let me share my experiences with it!

Being a professional Ember developer, my love towards React has never faded away. React with its' component oriented architecture boosts productivity, ensures stable code and is backed up with strong community.

I don't wanna bore you, with this sort of things that you(probably many Web devs) hear in routine.

I think, Its' time to get our hands dirty with Portals

'Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component'

Generally, not everyone in the world can understand the definition in the official docs in a single glance!, atleast NOT ME! (jus kidding, Reacts' docs on Portals is more beginner friendly peeps, go check it out)

So i decided to have a practical approach with it:

As stated in the definition, Portals provide a way to render children of a react component somewhere else in the DOM, not in the same hierarchy!

As soon i realised it, i was ended up with nothing but questions.

OMG what about the event bubbling? and many...

Being a profressional ember developer, i have used Ember Wormhole, it is an addon probably does the similar work of Portals in Ember.

I kept digging more about Portals. One thing i explored is its' use-case in Modal Dialogs.

I built a modal component with bootstrap(overriding some of bootstrap styles) in react similar to this

//Modal.jsimport React from "react";import ReactDOM from "react-dom";export default class Modal extends React.Component {  onClose = e => {    this.props.onClose && this.props.onClose(e);  };  render() {    let modal = (<div      class="modal fade"      id="exampleModalCenter"    >      <div class="modal-dialog" role="document">        <div class="modal-content">          <div class="modal-header">            <h5 class="modal-title" id="exampleModalLongTitle">              Modal title            </h5>            <button              type="button"              class="close"            >              <span aria-hidden="true">&times;</span>            </button>          </div>          <div class="modal-body">...</div>          <div class="modal-footer">            <button              type="button"              class="btn btn-secondary"            >              Close            </button>            <button type="button" class="btn btn-primary">              Save changes            </button>          </div>        </div>      </div>    </div>    );    return (modal);  }}

I rendered it as a child to App

//App.js    import React from "react";import Modal from "./Modal-Compo";export default class App extends React.Component {  onClose = e => {    this.props.onClose && this.props.onClose(e);  };  render() {    let alignCenter = {      display: "flex",      alignItems: "center",      justifyCenter: "center",      height: "200px",      overflow: "hidden",      width: "50%",      margin: "auto",      marginTop: "10%"    };    return (    <div style={alignCenter}>      <p style={{ height: "100%", margin: "0" }}>        //some random 100 lines      </p>      <Modal onClose={this.onClose}/>    </div>  ) }}

Atlast rendered the App component in the root element

//Index.jsimport React from "react";import ReactDOM from "react-dom";import "bootstrap/dist/css/bootstrap.min.css";import "jquery/dist/jquery.min.js";import "bootstrap/dist/js/bootstrap.min.js";import App from "./components/App";import "./styles.css";function WhatAreModals() {  return (    <div style={{ height: "100vh" }} className="App">      <App />      <button        type="button"        className="btn btn-primary"        data-toggle="modal"        data-target="#exampleModalCenter"      >        Launch demo modal      </button>    </div>  );}const rootElement = document.getElementById("root");ReactDOM.render(<WhatAreModals />, rootElement);

Finally my prototype was ready

When i clicked the Launch demo modal CTA, this happened (oopsy)

The culprit is the App component styled 'overflow:hidden', as in our case the Modal component is rendered as a child of App whose overflow is hidden, our Modal never shows up

Here is where the life saver Portal comes in

I just made a tweak in my Modal component and the index.html(created another root element for Modal to be rendered)

//index.html<div id="root"></div><div id="modal-root"></div>

Rendered Modal in Portal, changed return statement by implementing createPortal

//Modal.jsReactDOM.createPortal(modal, document.getElementById("modal-root"));

It worked seamlessly,

The problem was solved by breaking the Modal component out of the container, out of the hierarchy.

But suddenly i got into a confusion, as the hierarchy is broken i doubted whether event bubbling will occur? (I think, Many will question this!).

I went on digging deeper

Native DOM Snapshot:

React DOM:

Finally, i was satisfied seeing this, probably many would be
From the snapshots, we come to know that the hierarchy is unaltered in Reacts' Virtual DOM, so event bubbling will happen with ease.

Portals can be widely used when a parent component has an overflow: hidden or z-index style, but you need the child to visually break out of its container. For example, dialogs, hovercards, and tooltips.

I feel this post would've satisfied you on Reacts' createPortal API, if yes, feel free to share this with your colleague web devs as well.


Original Link: https://dev.to/theaswathprabhu/portals-are-lit-31l8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To