Variable PopperConst

Type Declaration

• • (props: PopperPropsExtend): Element

  • Material-UI Popper component with fade animation and keyboard management.

    Wraps Material-UI's Popper to provide floating layer positioned relative to an anchor element. Includes React Spring fade-in animation, keyboard event handling, focus trap support, and automatic focus management. Useful for dropdown menus, select options, and floating UI panels.

    Parameters

    • props: PopperPropsExtend

      Popper configuration (see PopperPropsExtend interface)

    Returns Element

    Popper component with fade animation and focus management

    Example

    // Basic usage
    <Popper
      open={isOpen}
      anchorEl={anchorElement}
    >
      <Paper>
        <Typography>Popper content</Typography>
      </Paper>
    </Popper>
    
    // With placement and keyboard handling
    <Popper
      open={isOpen}
      anchorEl={anchorElement}
      placement="bottom-start"
      onClose={handleClose}
      handleKeyDown={(key, callback) => {
        if (key === 'Escape') callback();
      }}
    >
      <Box p={2}>Interactive content</Box>
    </Popper>
    
    // With custom styling
    <Popper
      open={isOpen}
      anchorEl={anchorElement}
      sx={{
        zIndex: 'tooltip',
        '& .MuiPaper-root': {
          p: 2
        }
      }}
    >
      <Typography>Styled content</Typography>
    </Popper>
    Copy

    See

    https://mui.com/material-ui/react-popper/