Skip to content

Instantly share code, notes, and snippets.

@Vinlock
Last active February 20, 2024 11:12
Show Gist options
  • Save Vinlock/1513c6ccdf39f3a5cd24df7f61043e88 to your computer and use it in GitHub Desktop.
Save Vinlock/1513c6ccdf39f3a5cd24df7f61043e88 to your computer and use it in GitHub Desktop.
Antd Use Modal Hook
import React from 'react'
import ReactDOM from 'react-dom'
import { Modal } from 'antd'
const useModal = (Component, props) => {
const [open, setOpen] = React.useState(false)
const [loading, setLoading] = React.useState(false)
const onOk = props.onOk || (() => {})
const handleOk = () => {
(async () => {
setLoading(true)
return onOk()
}).then(() => {
setOpen(false)
})
}
const onCancel = props.onCancel || (() => {})
const handleCancel = () => {
setOpen(false)
onCancel()
}
const handleAfterClose = () => {
setLoading(false)
}
return {
setModalLoading: setLoading,
setModalOpen: setOpen,
modal: ReactDOM.createPortal((
<Modal
title={props.title}
visible={open}
confirmLoading={loading}
onOk={handleOk}
onCancel={handleCancel}
afterClose={handleAfterClose}
{...props.modalProps}
>
<Component {...props.componentProps} />
</Modal>
), document.body),
}
}
export default useModal
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment