The documentation I read on mdn didn't mention the close method so I, foolishly, just accepted there wasn't one. The documentation you linked is a lot more thorough thank you. I've updated my post.
Yes if you support anything older than cutting edge you're going to need either a polyfill or to keep using the old method for now (which is why I linked my old post too).
Fwiw, here's our 3 year old component (at the time, only Chrome supported the element natively):
constModal=({children,header,closeModal,visible})=>{constcontainer=useRef(null);if(container.current==null){container.current=document.createElement("div");}constdialog=useRef(null);useEffect(()=>{document.body.appendChild(container.current);return()=>container.current.remove();},[]);useEffect(()=>{if(dialog.current){dialogPolyfill.registerDialog(dialog.current);}});useEffect(()=>{if(dialog.current){if(visible){// without this test, hot reload will error out when the modal is still visibleif(!dialog.current.open){dialog.current.showModal();}}else{dialog.current.close();}}},[visible]);returncreatePortal(!visible?null:(<dialogclassName={styles.modal_container}ref={dialog}onCancel={e=>{e.preventDefault();closeModal&&closeModal(e);}}><divclassName={styles.modal_header}>{header}{closeModal&&(<buttonclassName={styles.modal_close}onClick={closeModal}><Iconicon="close-circle"/></button>
)}</div>
<divclassName={styles.modal_content}>{children}</div>
</dialog>
),container.current,);}
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
The documentation I read on mdn didn't mention the close method so I, foolishly, just accepted there wasn't one. The documentation you linked is a lot more thorough thank you. I've updated my post.
Yes if you support anything older than cutting edge you're going to need either a polyfill or to keep using the old method for now (which is why I linked my old post too).
Fwiw, here's our 3 year old component (at the time, only Chrome supported the element natively):