react-components-library

재사용 가능한 리액트 컴포넌트를 모아놓은 라이브러리

installing

npm i @dahyeeee/react-components-library

Components

Modal

document.body (html최상단 요소)에서 모달창이 열립니다.

imports

import { Modal } from "@dahyeeee/react-components-library";

Props

| props | value | description | | -------------- | ---------------------------------------------- | ----------------------------------------------- | | $position | 'bottom', 'top', 'middle' (default = 'bottom') | 모달의 위치를 정할 수 있습니다. | | isModalVisible | boolean | 모달이 화면에 나타남의 유무를 정할 수 있습니다. | | closeModal | function | isModalVisible의 값을 false로 바꿔주는 함수. |

Usage Example

import { useState } from "react";
import { Modal } from "@dahyeeee/react-components-library";

const PageWithModal = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <button type="button" onClick={openModal}>
        open
      </button>
      <Modal
        $position="middle"
        isModalVisible={isModalOpen}
        closeModal={closeModal}
      >
        {/* You can locate your Modal contents here */}
      </Modal>
    </>
  );
};