Container component for AriaModal

Modal.js

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import AriaModal from 'react-aria-modal';
import classNames from 'utils/namespace-classnames';

import './Modal.css';

class Modal extends React.Component {
  constructor(props) {
    super(props);
  
    this.state = {
      modalActive: false
    }
  }

  activateModal = () => {
    this.setState({ modalActive: true });
  }

  deactivateModal = () => {
    this.setState({ modalActive: false });
  }

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

    const Modal = this.state.modalActive ? (
      <AriaModal
        titleText={title}
        onExit={this.deactivateModal}
        initialFocus={`#${id}`}
        verticallyCenter={true}
      >
        <div id={id} className={classNames('modal', className)} tabIndex="0">
          {children()}
          <button className={classNames('modal__close')} onClick={this.deactivateModal}>
            Close
          </button>
        </div>
      </AriaModal>
    ) : false

    return (
      <Fragment>
        {render(this.activateModal)}
        {Modal}
      </Fragment>
    );
  }

}

Modal.propTypes = {
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  render: PropTypes.func.isRequired,
  className: PropTypes.string,
  children: PropTypes.func.isRequired,
}

export default Modal;



// usage

// <Modal
//   id="modal-id"
//   title="Modal title"
//   render={(activate) => (
//     <button onClick={activate}>
//       Show modal
//     </button>
//   )}
// >
//   {() => (
//     // modal content inline
//     // or <Component /> to render
//   )}
// </Modal>