Popper

Um Popper pode ser usado para exibir algum conteúdo em cima do outro. É uma alternativa para react-popper.

Algumas características importantes do componente Popper:

🕷 Popper é baseado na biblioteca de terceiros (Popper.js) para um posicionamento perfeito.
💄 É uma API alternativa para react-popper. Visa a simplicidade.
📦 10 kB gzipped (7 kB do Popper.js).
O elemento filho Portal no corpo do documento, evita problemas de renderização. Você pode desativar esse comportamento com disablePortal.
O scroll não e bloqueado como ocorre com o componente Popover. O posicionamento do popper é atualizado com a área disponível no visor.
Clicar fora não oculta o componente Popper. Se você precisar desse comportamento, você pode usar o componente ClickAwayListener - veja o exemplo na seção da documentação do menu.
O anchorEl é passado como o objeto de referência para criar uma nova instância Popper.js.

Popper Simples

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
  <div className={classes.paper}>The content of the Popper.</div>
</Popper>

Transições

The open/close state of the popper can be animated with a render prop child and a transition component. Este componente deve respeitar as seguintes condições:

Be a direct child descendent of the popper.
Chamar a propriedade de callback onEnter quando a transição de entrada iniciar.
Chamar a propriedade de callback onExited quando a transição de saída for concluída. These two callbacks allow the popper to unmount the child content when closed and fully transitioned.

Popper has built-in support for react-transition-group.

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps} timeout={350}>
      <div className={classes.paper}>The content of the Popper.</div>
    </Fade>
  )}
</Popper>

Como alternativa, você pode usar react-spring.

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps}>
      <div className={classes.paper}>The content of the Popper.</div>
    </Fade>
  )}
</Popper>

Posicionado Popper

Rolagem - Exemplo interativo

Scroll around this container to experiment with flip and preventOverflow modifiers.

Appearance

Placement

Disable portal (the children stay within it's parent DOM hierarchy)

Modifiers (options from Popper.js)

Prevent overflow

Flip (flip the popper’s placement when it starts to overlap its reference element)Arrow


  <Popper
    placement="bottom"
    disablePortal={false}
    modifiers={{
      flip: {
        enabled: true,
      },
      preventOverflow: {
        enabled: true,
        boundariesElement: 'scrollParent',
      },
      arrow: {
        enabled: false,
        element: arrowRef,
      },
    }}
  >

Objeto de referência falsificado

A propriedade anchorEl pode ser uma referência a um elemento DOM falso. Você só precisa criar um objeto com o formato ReferenceObject.

Selecione parte do texto para ver o popper:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

Projetos Complementares

Para usos mais avançados, você pode tirar vantagem com:

PopupState helper

Existe um pacote de terceiros material-ui-popup-state que cuida do estado popover para você na maioria dos casos.

API

<Popper />