“Defina o Popper Clique para fora” Respostas de código

Defina o Popper Clique para fora

//dependencies
const { render } = ReactDOM,
      { useState } = React,
      { Popper, Button, Paper, ClickAwayListener } = MaterialUI
      
//custom popper
const MyPopper = ({isOpen,clickAwayHandler}) => (
    <ClickAwayListener onClickAway={clickAwayHandler}>
        <Popper open={isOpen}>
          <Paper className="popper">There goes my custom popper</Paper>
        </Popper>
    </ClickAwayListener> 
)

//main page
const MainPage = () => {
  const [isOpen, setIsOpen] = useState(true),
        clickAwayHandler = () => setIsOpen(false),
        clickHandler = () => setIsOpen(true)
  return (
    <div>
      <Button onClick={clickHandler}>Toggle pop-up</Button>
      {
        isOpen && <MyPopper {...{clickAwayHandler,isOpen}} /> 
      }
    </div>
  )
}

//render
render (
  <MainPage />,
  document.getElementById('root')
)