-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: useModal 훅 구현 #24
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨습니다!
src/useModal/useModal.tsx
Outdated
export type UseModalAnimations = { | ||
overlayAnimation?: { | ||
showClassName?: string; | ||
hideClassName?: string; | ||
}; | ||
modalAnimation?: { | ||
showClassName?: string; | ||
hideClassName?: string; | ||
}; | ||
}; | ||
|
||
interface UseModalProps extends UseModalAnimations { | ||
modalRoot?: ModalRoot; | ||
overlayClose?: boolean; | ||
} | ||
|
||
interface ModalProps { | ||
overlayClassName?: string; | ||
modalClassName?: string; | ||
style?: CSSProperties; | ||
children: ReactNode; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
UseModalAnimations
은 type으로 선언하고 나머지는 interface로 선언하신 이유가 있나요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
헉 중간에 변경했었는데 type으로 남아있네요.
interface로 변경하도록 하겠습니다!
useModal.mov
portal에 애니메이션을 적용한 modal을 간편하게 렌더링할 수 있는 useModal을 추가하였습니다.
useAnimation을 의존성으로 갖습니다.
함수 인자
modalProps객체를 받습니다. 해당 객체는 아래와 같이 구성됩니다.
modalRoot
: 모달을 렌더링할 HTMLElement입니다. default는document.body
입니다.overlayClose
: overlay를 눌러 modal을 닫을지를 설정합니다. default는true
입니다.overlayAnimation
: Overlay에 적용될 애니메이션 className입니다.showClassName
과hideClassName
두 가지 key-value를 받을 수 있습니다.modalAnimation
: Modal에 적용될 애니메이션 className입니다.showClassName
과hideClassName
두 가지 key-value를 받을 수 있습니다.반환값
Modal
: 컴포넌트로,해당 컴포넌트로 감싸진 children이 지정한 root에 portal을 통해 렌더링 됩니다.show
: 모달을 엽니다.hide
: 모달을 닫습니다.isShow
: 모달이 열려있는지 상태를 나타냅니다.사용 예시