React modal with dialog element

by Carson Evans

HTML

<div id="app"></div>

React

function Modal({isOpen, onClose, children}) {
	const ref = React.useRef()
  
  React.useEffect(() => {
  	if (ref.current && isOpen)
    	ref.current.showModal()
    else
    	ref.current.close()
  }, [ref.current, isOpen])
  
	return (
  	<dialog ref={ref} onCancel={onClose}>
      {children}{' '}
      <button onClick={onClose} type="button">close me</button>
    </dialog>
  )
}

function App() {
	const [isOpen, setIsOpen] = React.useState(false)
	return (
  	<React.Fragment>
      <button onClick={() => setIsOpen(true)}>click me</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>Hello world</Modal>
    </React.Fragment>
  )
}

ReactDOM.render(<App />, document.getElementById("app"))