2.0.6 • Published 1 year ago
seeen-react-payments-modal v2.0.6
seeen-react-payments-modal
TypeScript를 지원하는 BottomSheet 모달 라이브러리입니다.
설치 방법
npm install seeen-react-payments-modal
yarn add seeen-react-payments-modal
사용 방법
import Modal from 'seeen-react-payments-modal';
<Modal isModalOpen={/* boolean 타입의 모달 오픈 여부 값 */} closeModal={/* ()=>void 타입의 모달 닫기 메서드 */}>
{ /* children */ }
</Modal>
Props
children
- React Node 타입의 필수 값입니다.
- 모달 내부에 들어갈 JSX 입니다.
isModalOpen
- boolean 타입의 필수 값입니다. 기본 값은 false 입니다.
- 모달을 띄울지 말지를 결정하는 값입니다.
closeModal
- ()=>void 타입의 필수 값입니다.
- 모달을 닫는 역할의 함수이며 isModalOpen을 false로 변경하는 로직이 있어야 정상동작합니다.
position
- 'center' | 'bottom' 타입의 선택 값입니다.
- 모달을 띄울 위치를 선택할 수 있습니다. center는 화면 중앙에, bottom은 화면 아래에 띄웁니다.
width, height
- string 타입의 선택 값입니다. 기본 값은 220px 입니다.
- 모달의 가로 및 세로 크기를 조절합니다.
사용 예시
import Modal from 'seeen-react-payments-modal';
const [isModalOpen, setIsModalOpen] = useState(true);
const handleCloseModal () => {
setIsModalOpen(false);
}
return (
<Modal isModalOpen={isModalOpen} closeModal={handleCloseModal} position="bottom" width="100%">
<h2>이 곳에 내용을 작성하세요.</h2>
</Modal>
);
2.0.6
1 year ago
2.0.5
1 year ago
2.0.4
1 year ago
2.0.3
1 year ago
2.0.2
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago