[2차 프로젝트] Modal라이브러리

백수·2022년 8월 7일
0

설치 라이브러리 :
https://www.npmjs.com/package/react-modal

import React from 'react';
import Modal from 'react-modal';
import ModalWrap from '../../pages/Detail/components/ModalWrap';
import { useLocation } from 'react-router-dom';

const ModalWindow = props => {
  let { modalIsOpen, setModalIsOpen, contents, modalStyle } = props;

  const location = useLocation();

  let isCheckPath = location.pathname === '/detail';

  return (
    <Modal
      isOpen={modalIsOpen}
      style={modalStyle}
      ariaHideApp={false}
      onRequestClose={() => setModalIsOpen(prev => !prev)}
    >
      {isCheckPath && (
        <ModalWrap setModalIsOpen={setModalIsOpen} contents={contents} />
      )}
    </Modal>
  );
};

export default ModalWindow;


///사용 예
 <ModalWindow
          modalIsOpen={modalIsOpen}
          setModalIsOpen={setModalIsOpen}
          modalStyle={modalStyle}
          contents={detail_images.map((els, idx) => {
            return <img key={idx} src={els} alt="1" />;
          })}
        />
profile
안녕하세요백수아빠입니다.

0개의 댓글