Reusable Modal Architecture For Large-Scale React Applications - Part 4

Reusable modal snapshot

TL;DR UI engineering is a lucrative career if you're highly skilled. But it's very challenging, and you need to know what you're doing. In this tutorial series, you will learn how to architect a highly reusable, scalable and customizable Modal component for a large-scale application developed with React, Redux & React-Bootstrap. Modals are a very important UI element for almost every application, so architect them right!

This tutorial series is React 17 ready. See this post on React's soon to be deprecated lifecycle hooks.


The ModalHeader Component

The ModalHeader sub-component is super straight forward. It’s not mandatory to use, but if you do it will display a title (a.k.a. call to action) for the entire Modal. It can also display any other custom elements that you wish to have.

By creating a separate ModalHeader component we give developers the ability to customize this section of the Modal in any way.

You can review the entire code for this component in this gist or clone the demo repo.

The Render Method

First, to make this work we need to render React Bootstrap’s own Modal Header by wrapping it as follows:

...
import { Modal as ReactBootstrapModal } from 'react-bootstrap'
...

render() {
  const { children, title } = this.props

  return (
    <div className={modalHeaderStyles}>
      <ReactBootstrapModal.Header>
        <ReactBootstrapModal.Title>{title}</ReactBootstrapModal.Title>
        {children}
      </ReactBootstrapModal.Header>
    </div>
  )
}

...

So in the main render() method we’re just wrapping <ReactBootstrapModal.Header> and then passing children as props.

Customization

Because we’re passing the children prop in ModalHeader, we can make this component customizable like this:

<Modal
  modalKey="modal-example-3"
  modalState={modalState}>
  <ModalHeader title="Modal 3 Header Title">
    // Custom header content and elements go here
  /ModalHeader>
</Modal>

Let’s say you wanted to add an “x” icon in the upper-right hand corner of the header.

Modal with customized header - has X icon in header

All you’d have to do is pass in an element into the ModalHeader component like this:

<Modal
  modalKey="modal-example-3"
  modalState={ui.Modal}>
  <ModalHeader title="Customized Modal Header">
    <i className="x-icon">X</i>
  </ModalHeader
 />
</Modal>

That’s all the ModalHeader sub-component needs to do for now.

Next Steps

Next, we’re going to implement the ModalBody component, another very straightforward sub-component of our reusable Modal architecture.

Next Steps - The ModalBody Component.





Learn How To Develop Professional React Apps

Professional React App brand image

React, Redux & Webpack are HOT HOT skills that are IN DEMAND.

Do you have what it takes to be a professional developer?

Learn from an industry expert and start building professional React apps for clients, employers, or your own startup.


UPGRADE YOUR SKILLS