React에서 사용자 정의 팝업 구성 요소 만들기

이 블로그는 원래 My Blog에 게시되었습니다.

때때로 우리는 Bootstrap이나 자료에서 제공하는 다양한 모달 상자를 사용하다가 사라지거나 이러한 프레임워크를 사용하지 않는다고 가정합니다. 그런 다음 팝업 및 모달 상자에 대한 자체 구성 요소를 만들어야 하는 경우 이러한 요구 사항 중 하나를 위해 이것을 만들었습니다.

읽기 전에 살펴보고 싶다면 이 데모를 시도해 보세요.



이것은 프로젝트 전체의 모든 구성 요소에서 호출할 수 있는 완전히 재사용 가능한 구성 요소입니다.

1단계: 다음 코드를 사용하여 custom-popup.module.css라는 파일을 만듭니다.

.overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  cursor: pointer;
  color: #000;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px) {
  .popup {
    width: 70%;
  }
}

2단계: 이제 다음 코드를 사용하여 이름이 CustomPopup.jsx인 팝업 구성 요소를 만듭니다.

import { useEffect, useState } from "react";
import popupStyles from "./custom-popup.module.css";
import PropTypes from "prop-types";
const CustomPopup = (props) => {
  const [show, setShow] = useState(false);

  const closeHandler = (e) => {
    setShow(false);
    props.onClose(false);
  };

  useEffect(() => {
    setShow(props.show);
  }, [props.show]);

  return (
    <div
      style={{
        visibility: show ? "visible" : "hidden",
        opacity: show ? "1" : "0"
      }}
      className={popupStyles.overlay}
    >
      <div className={popupStyles.popup}>
        <h2>{props.title}</h2>
        <span className={popupStyles.close} onClick={closeHandler}>
          &times;
        </span>
        <div className={popupStyles.content}>{props.children}</div>
      </div>
    </div>
  );
};

CustomPopup.propTypes = {
  title: PropTypes.string.isRequired,
  show: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired
};
export default CustomPopup;

PropTypes를 사용하는 이 구성 요소, 프로젝트에 PropTypes를 설치하지 않은 경우 먼저 다음을 사용하여 설치하십시오.

npm install prop-types --save

3단계: 다른 구성 요소에서 호출

<CustomPopup
        onClose={popupCloseHandler}
        show={visibility}
        title="Hello Jeetendra"
      >
        <h1>Hello This is Popup Content Area</h1>
        <h2>This is my lorem ipsum text here!</h2>
      </CustomPopup>

3가지 소품이 필요합니다.
1: onClose – 닫기 후 일부 활동을 수행하기 위해 핸들러가 필요합니다.
팝업 자체를 클릭
2: show – 부울을 사용하여 팝업의 가시성을 전달합니다.
3: 제목 – 팝업 제목 제공

팝업 콘텐츠로 렌더링하려는 유효한 JSX를 내부에서 전달할 수 있습니다.

이 PopUp 구성 요소를 어떻게 활용할 수 있는지 완전한 예제가 필요한 경우 다음 코드를 살펴볼 수 있습니다.

import { useState } from "react";
import CustomPopup from "./CustomPopup";
import "./styles.css";

export default function App() {
  const [visibility, setVisibility] = useState(false);

  const popupCloseHandler = (e) => {
    setVisibility(e);
  };

  return (
    <div className="App">
      <button onClick={(e) => setVisibility(!visibility)}>Toggle Popup</button>

      <CustomPopup
        onClose={popupCloseHandler}
        show={visibility}
        title="Hello Jeetendra"
      >
        <h1>Hello This is Popup Content Area</h1>
        <h2>This is my lorem ipsum text here!</h2>
      </CustomPopup>
    </div>
  );
}

이 블로그를 위한 것입니다. 의심 사항이나 제안 사항이 있는 경우 저에게 연락할 수 있습니다. 댓글 섹션에 알려주세요.