Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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