Popper

Render dropdown in portal with popper.js
Import

Usage

Popper is an utility component used under the hood in Menu, Progress, 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 start using Popper add 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={referenceElement}>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
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 elementRef={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 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-bottom-left
pop-bottom-right
pop-top-left
pop-top-right

You can control Popper transition with 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} />
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback