Popper

Render dropdown in portal with popper.js
Import

Usage

Popper is a utility component used under the hood in Menu, Popover, Tooltip and other Mantine components. You can use it to create your own dropdowns and popovers if Mantine components do not meet your requirements.

To use Popper, add the following required props first:

  • referenceElement – element based on which popper will be positioned
  • children – popper content, any React node
  • mounted – current popper opened state: true to display, false to hide
import { useState } from 'react';
import { Popper } from '@mantine/core';
function Demo() {
// useState is required to store element ref, useRef won't work
const [referenceElement, setReferenceElement] = useState(null);
return (
<div>
{/* Based on this button popper will be positioned */}
<button ref={setReferenceElement} type="button">
Reference element
</button>
{/*
* Popper is rendered inside Portal, it will be added
* outside of current rendering context – before closing body tag
*/}
<Popper referenceElement={referenceElement} mounted>
<div>Popper content</div>
</Popper>
</div>
);
}

Position

Popper position is controlled by these props:

  • position – left, right, bottom, top
  • placement – start, center, end
  • gutter – spacing between reference and dropdown elements in px
  • withArrow – displays arrow, arrow position is calculated by position and placement props
  • arrowSize – arrow size in px
Placement
import { useState } from 'react';
import { Popper, Button, Paper, Center, Group, useMantineTheme } from '@mantine/core';
function Demo() {
const [referenceElement, setReferenceElement] = useState(null);
const [visible, setVisible] = useState(true);
const theme = useMantineTheme();
return (
<Group position="center">
<Button ref={setReferenceElement} onClick={() => setVisible((m) => !m)}>
Reference element
</Button>
<Popper
arrowSize={5}
withArrow
mounted={visible}
referenceElement={referenceElement}
transition="pop-top-left"
transitionDuration={200}
arrowStyle={{
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
}}
>
<Paper
style={{
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
}}
>
<Center style={{ height: 100, width: 200 }}>Popper content</Center>
</Paper>
</Popper>
</Group>
);
}

Transitions

Popper uses Transition component to animate presence. You can choose one of the premade transitions or create your own. All premade transitions demo (Tooltip component which uses Popper):

fade
scale
scale-y
scale-x
skew-up
skew-down
rotate-left
rotate-right
slide-down
slide-up
slide-left
slide-right
pop
pop-bottom-left
pop-bottom-right
pop-top-left
pop-top-right

You can control Popper transition with the following props:

  • transition – premade transition name or custom transition styles object
  • transitionDuration – transition duration in ms, defaults to 0
  • transitionTimingFunction – defaults to theme.transitionTimingFunction
<Popper
transition="rotate-left"
transitionDuration={150}
transitionTimingFunction="ease"
{...otherProps}
/>

Force position update

In some cases Popper position will get outdated since it is rendered in Portal Popper does not know about layout changes. To force position update, provide an array of dependencies which trigger layout updates:

<Popper forceUpdateDependencies={[firstDependency, secondDependency]} {...otherProps} />

z-index

By default, Popper has z-index: 1, you can change that with zIndex prop:

<Popper zIndex={100} {...otherProps} />