Simple Modal reprint based on React Hook

Codepen. IO/Kevin – Loeng…

const CreateModalTest = (props) = > {
  const {children, visible, closeModal} = props;

  // Take the original overflow value of the body on the first rendering
  const bodyOverflow = useRef(window.getComputedStyle(document.body).overflow);

  useEffect(() = > { // Dynamically modify the overflow value of body based on visible
    if (visible) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = bodyOverflow.current;
    }
  }, [visible]);

  const handleClick = (event) = > {
    // Close the modal box when clicking on the mask itself, do not close the modal box when clicking on the content of the modal box
    if(event.target === event.currentTarget) { closeModal(); }}const modal = ReactDOM.createPortal(
    <div className="comp-modal-one" onClick={handleClick}>
      {children}
    </div>.document.body
  );

  return <div>{visible && modal}</div>;
}
Copy the code

use

const modalConfig = {
   visible: modalVisible,
   closeModal: () = > {
     setModalVisible(false); }};<CreateModalTest {. modalConfig} >
  <CompProjectEdit/>
</CreateModalTest>
Copy the code