How to create own reusable dialog in Reactjs
Blog React Demo of dialog

Today post is going to be more interested because today we are going to learn how to create own reusable dialog in Reactjs. At end of this post you will learn.

  • How to create own reusable dialog in Reactjs.
  • How to handle outside click functionality.
  • How to make it reusable.
  • Making background blur.

Overview

We are going to create few files like one for styling , one for reusable function which is going to create the background blur, one is our reusable dialog component and one is our demo component from where we will gonna use the dialog.

Reusable React dialog component

Let’s start with creating an empty index.jsx file. We gonna call it Dialog. This is going to be our main reusable dialog component.

We gonna import basic packages i.e react, prop-types and react-dom.

After that we gonna need an icon for closing the dialog on top. You can use any icon/ image for that. We gonna call this CloseIcon.

After that we gonna import a function from our new file i.e blur.js. We will use this function to blue the background so that it will give more good user experience to the user.

Blog React blur.js How to create own reusable dialog in Reactjs
Blog React blur.js

In the above blur.js file you can see we are exporting a object with two keys add and remove. Add key will add blur to the background in our case root element and Remove key will going to remove the background from our root element.

Let’s move back to our Dialog component. In Dialog component we are going to use the two life cycle methods of Reactjs.

In componentDidMount we are doing three things i.e

  • We are adding the eventListener for outside click (i.e closing the dialog when anywhere user clicks outside the dialog area.)
  • We are disabling the scroll of body so that user can’t scroll while the dialog is opened.
  • We also adding blur to the background using blur.add function.

In componentWillUnmount we also doing three things i.e

  • We are removing the eventlistner for outside click (i.e closing the dialog when anywhere user clicks outside the dialog area.)
  • We are enabling the scroll of body so that user can scroll while the dialog is opened.
  • We also removing blur to the background using blur.remove function.

Two extra functions

We are going to create two extra functions for dialog

handleClickOutside

This function will handle the outside click and will call close function provided from prop by parent to close the dialog when outside will be clicked.

handleClickOutside = event => {
const { className } = event.target;
if ( this.show && !this.show.contains(event.target) && className === "dialog-wrapper" )
{
const { onClose } = this.props;
onClose();
}
};

setWrapperRef

This function is used for just creating the ref so that we can distinguished between dialog inside click and outside click.

setWrapperRef = node => { this.show = node; };

and we will set the ref on a div
<div className="dialog" ref={this.setWrapperRef}>

Rendering the Data in Dialog

We can render the data in Dialog using children prop and we are going to use the ReactDOM.createPortal to render the data at body so that we can center the dialog using fixed position property. The reason why we are using ReactDOM.createPortal instead of normal render is that fixed property is treated different in different browsers.If you have not seen earlier about createPortal you can learn here. At end our render will gonna look like this

Blog React Dialog Component render method
Blog React Dialog Component render method

Rendering the Reusable Dialog

To use our reusable dialog we only need to pass children and onClose prop.

blog react rendering dialog component
Blog React Rendering Dialog Component

Styling

Don’t forget to add styling to your dialog. You can see styling from codesandbox.

Edit Reuseable Dialog

Categories: Reactjs

3 Comments

How to efficiently render large list in Reactjs - Blog React · January 16, 2020 at 4:53 am

[…] If you want to learn how to create own reusable dialog you check here. […]

How to make image gallery in React - Blog React · January 30, 2020 at 3:49 am

[…] If you want to learn how to create own reusable dialog you can learn from here. […]

How to create Tab Manager in React - Blog React · March 24, 2020 at 3:55 am

[…] Also checkout how to create dialog box in React. […]

Comments are closed.