Popper

Usage

Popper is a 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 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={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 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):

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} />