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

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.

Introduction

The Modal Architecture

The Main Modal Component

The ModalHeader Component

The ModalBody Component

The ModalFooter Component

BONUS - Using CSS Modules

The ModalFooter Component

The ModalFooter is the last sub-component of our architecture. You can review the full code for this sub-component here.

The Render Method

Similar to what we did in the ModalHeader and ModalBody sub-components, we’re simply wrapping and rendering React Bootstrap’s Modal Footer (ReactBootstrapModal.Footer).

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

...

render() {
    const content = this.getContent()

    return (
      <div className={modalFooterStyles}>
        <ReactBootstrapModal.Footer>
          {content}
        </ReactBootstrapModal.Footer>
      </div>
    )
  }

...

The getContent() method that gets called compiles the content that gets rendered, and it makes use of the children prop like this:

...

getContent=() =>{
  const { children } = this.props

  return (
    <div>
      <div onClick={this.onCancel} className="cancel-btn btn btn-link">Cancel</div>
      <div className="custom-modal-footer-actions">{children}</div>
    </div>
  )
}

...

Remember that when we defined our requirements in part 1, we stated that we always wanted a “Cancel” link in the bottom left-hand corner. We’ve added this link in the getContent() method as illustrated in the code snippet above.

Also, our requirements specify that custom content or elements can be passed to the footer, such as in the snapshot below.

Customized footer of reusable Modal component

Because we’re making use of the children prop in the getContent() method, we’re able to do that.

In the end, a customized ModalFooter will be implemented like this.

<Modal
  modalKey="modal-example-4"
  modalState={modalState}
  closeAction={actions.ui.closeModal}>
  <ModalFooter>
    <input type="button" value="Do Something" onTouchTap={() => alert('Do something!')} />
  </ModalFooter>
</Modal>

See how customizable this is?

The handleClose Action

When a user clicks the “Cancel” link, the Modal should close. Since we’re making use of React’s Context API, we automatically inherit the handleClose() function from the context that we specified in the main parent Modal component.

...
onCancel=() => {
  const { handleClose } = this.context
  handleClose()
}
...

Note: handleClose() is really just a wrapper for the closeAction prop that calls a Redux Action Creator (or whatever dispatcher you’re using) to change the state of the Modal from open to closed.

...
closeModal = () => {
  // Logic to close the Modal, usually a Redux Action Creator
}
...

<Modal
  modalKey="modal-example-3"
  modalState={ui.Modal}
  closeAction={this.closeModal}>
  <ModalHeader title="Modal 3 Header Title" />
  <ModalBody>Modal 3 body</ModalBody>
  <ModalFooter />
</Modal

...

That’s it for all of the sub-components in our general Modal architecture.

If you’re confused about anything, the best thing to do is just see the working code. So go over to the demo repo, clone it, and inspect the code yourself!

Next Steps

If you’ve made it this far, congratulations! Next, lets see how to customize the styling of our Modal component with CSS Modules. Then we’ll call it a wrap!

Next Steps - BONUS: Using CSS Modules.