ReactJS – How to create a popup modal?

Use react-modal

import React from 'react'
import { default as ReactModal } from 'react-modal'
import Button from 'src/components/Button'
require('./index.scss')

interface Props {
  isOpen: boolean
  setIsOpen: (value: boolean) => void
}

const Modal: React.FC<Props> = ({ isOpen, setIsOpen, children }) => {
  const closeModal = () => {
    setIsOpen(false)
  }

  function onClickButton() {
    console.log('OK')
  }

  return (
    <ReactModal
      isOpen={isOpen}
      contentLabel='Example Modal'
      portalClassName='modal--portal'
      overlayClassName='modal--overlay'
      className='modal--class-name'
    >
      <div className='modal--header'>
        <div onClick={closeModal} className='modal--close'>
          <Icon
            type={`close-circle`}
          />
        </div>
      </div>
      <div className='modal--content'>
        {children}
      </div>
      <div className='modal--footer'>
        <Button
          onClick={onClickButton}
        >
          A Button
        </Button>
      </div>
    </ReactModal>
  )
}

export default Modal

.modal--portal {

}

.modal--overlay {
  @apply fixed inset-0 bg-black bg-opacity-80;
  @apply flex items-center justify-center;
  z-index: 100000;
}

.modal--class-name {
  @apply relative;
  width: 32%;
  &:focus {
    @apply outline-none;
  }
}

.modal--close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 13px;
}

.modal--header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F5F5;
  height: 79px;
}

.modal--content {
  background-color: #fff;
  max-height: 400px;
  overflow-y: scroll;
  padding: 24px 15px 93px 15px;
}

.modal--footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F5F5;
  height: 89px;
}