모던 React 모달 라이브러리
React를 위한 가볍고 프로미스 기반의 모달 컴포넌트로, 모달 처리를 간단하고 직관적이며 타입 안전하게 만들어줍니다.
기능
React Snappy Modal은 강력한 프로미스 기반 API를 통해
모달 관리를 간단하고 직관적으로 만들도록 설계되었습니다.
프로미스 기반 API
모달에서 async/await를 사용하여 콜백 지옥 없이 깔끔하고 순차적인 방식으로 사용자 상호작용을 처리할 수 있습니다.
경량화
의존성이 없고 번들 크기가 작아 애플리케이션을 빠르고 효율적으로 유지할 수 있습니다.
맞춤 설정 가능
간단한 구성 옵션으로 모달의 외관과 동작을 쉽게 맞춤 설정할 수 있습니다.
타입 안전성
TypeScript로 구축되어 우수한 타입 체크와 IntelliSense 지원을 제공합니다.
제어된 흐름
다음 단계를 진행하기 전에 사용자 입력을 기다려 애플리케이션의 흐름을 제어할 수 있습니다.
React 18+ 호환
동시 렌더링을 포함하여 최신 버전의 React와 완벽하게 작동하도록 구축되었습니다.
예제
이러한 일반적인 모달 패턴으로 React Snappy Modal의 실제 작동을 확인해보세요
알림 모달
간단한 알림 모달은 사용자에게 정보를 표시하는 데 사용할 수 있습니다. 모달은 사용자가 닫을 때 해결되는 프로미스를 반환합니다.
1function AlertModal() {
2 return (
3 <ModalWrapper>
4 <ModalTitle>Alert</ModalTitle>
5 <ModalText>
6 This is a simple alert modal that displays information to the user.
7 </ModalText>
8 <ModalButtons>
9 <ModalButton primary onClick={() => SnappyModal.close()}>
10 Confirm
11 </ModalButton>
12 </ModalButtons>
13 </ModalWrapper>
14 );
15}
16
17const showAlert = async () => {
18 await SnappyModal.show(<AlertModal />)
19 alert("alert closed")
20};
21확인 모달
확인 모달을 통해 사용자는 결정을 내릴 수 있습니다. 모달은 SnappyModal.close()에 전달된 값을 반환하여 사용자 선택을 쉽게 처리할 수 있습니다.
1function ConfirmModal() {
2 return (
3 <ModalWrapper>
4 <ModalTitle>Confirm Action</ModalTitle>
5 <ModalText>Are you sure you want to proceed?</ModalText>
6 <ModalButtons>
7 <ModalButton onClick={() => SnappyModal.close(false)}>
8 Cancel
9 </ModalButton>
10 <ModalButton primary onClick={() => SnappyModal.close(true)}>
11 Confirm
12 </ModalButton>
13 </ModalButtons>
14 </ModalWrapper>
15 );
16}
17
18const showConfirm = async () => {
19 const result = await SnappyModal.show(<ConfirmModal />);
20 alert("User confirmed:" + result);
21
22 if (result) {
23 // User confirmed
24 } else {
25 // User cancelled
26 }
27};
28폼 모달
사용자 입력을 수집하기 위한 모달 폼을 쉽게 만들 수 있습니다. 폼 데이터를 모달의 결과로 전달하여 간단하게 처리할 수 있습니다.
1function FormModal() {
2 const [name, setName] = useState("");
3
4 return (
5 <ModalWrapper>
6 <ModalTitle>Enter Your Name</ModalTitle>
7 <FormGroup>
8 <Label>Full Name</Label>
9 <Input
10 value={name}
11 onChange={e => setName(e.target.value)}
12 placeholder="Enter your full name"
13 />
14 </FormGroup>
15 <ModalButtons>
16 <ModalButton onClick={() => SnappyModal.close(null)}>
17 Cancel
18 </ModalButton>
19 <ModalButton primary onClick={() => SnappyModal.close(name)}>
20 Submit
21 </ModalButton>
22 </ModalButtons>
23 </ModalWrapper>
24 );
25}
26
27const showForm = async () => {
28 const result = await SnappyModal.show(<FormModal />);
29
30 if (result) {
31 alert("Submitted name:" + result);
32 }
33};
34설치
몇 가지 간단한 단계로 React Snappy Modal을 시작해보세요
1npm install react-snappy-modal패키지 설치하기
위에 표시된 대로 선호하는 패키지 관리자를 사용하여 React Snappy Modal 패키지를 설치하세요.
모달 컴포넌트 가져오기
애플리케이션에서 SnappyModal 컴포넌트를 가져옵니다.
1import SnappyModal from 'react-snappy-modal';SnappyModalProvider 추가하기
앱 어디에서나 모달을 표시할 수 있도록 SnappyModalProvider로 애플리케이션을 감싸세요.
1import { SnappyModalProvider } from 'react-snappy-modal';
2
3function App() {
4 return (
5 <SnappyModalProvider>
6 {/* Your app components */}
7 </SnappyModalProvider>
8 );
9}모달 사용 시작하기
이제 준비 완료! 이제 애플리케이션 어디에서나 SnappyModal.show()를 사용하여 모달을 표시할 수 있습니다.
사용법
애플리케이션에서 React Snappy Modal을 효과적으로 사용하는 방법을 알아보세요
기본 사용법
React Snappy Modal은 모달을 표시하기 위한 간단한 프로미스 기반 API를 제공합니다. 다음은 기본 예제입니다:
1import React from 'react';
2import SnappyModal, { useCurrentModal } from 'react-snappy-modal';
3
4function MyModal() {
5 const { resolveModal } = useCurrentModal();
6
7 return (
8 <div className="my-modal">
9 <h2>My Modal</h2>
10 <p>This is a basic modal example.</p>
11 <button onClick={() => resolveModal('modal result')}>
12 Close Modal
13 </button>
14 </div>
15 );
16}
17
18function MyComponent() {
19 const showModal = async () => {
20 const result = await SnappyModal.show(<MyModal />);
21
22 console.log('Modal result:', result);
23 };
24
25 return (
26 <button onClick={showModal}>Open Modal</button>
27 );
28}모달 옵션 구성하기
다양한 옵션으로 모달의 동작과 외관을 맞춤 설정할 수 있습니다:
1import SnappyModal, { useCurrentModal } from 'react-snappy-modal';
2
3function CustomModal() {
4 const { resolveModal } = useCurrentModal();
5
6 return (
7 <div className="my-modal">
8 <h2>Custom Modal</h2>
9 <p>This modal has custom options.</p>
10 <button onClick={() => resolveModal('result')}>
11 Close
12 </button>
13 </div>
14 );
15}
16
17// Show a modal with custom options
18const showCustomModal = async () => {
19 const result = await SnappyModal.show(
20 <CustomModal />,
21 {
22 // Modal configuration options
23 allowOutsideClick: false, // Prevent closing when clicking backdrop
24 allowScroll: true, // Allow page scrolling behind modal
25 backdrop: true, // Dim the page behind the modal
26 position: 'top-center', // Position modal at top
27 zIndex: 1050 // Custom z-index
28 }
29 );
30
31 console.log('Modal closed with:', result);
32};