Popover

Rich content popover

Import: import { Popover } from 'react-native-mantine';

Usage

import { Popover, Button, Text, Paper } from 'react-native-mantine';

const MyComponent = () => {
  return (
    <Popover>
      <Popover.Target>
        <Button>Open Popover</Button>
      </Popover.Target>

      <Popover.Dropdown>
        <Paper shadow="lg" p="md">
          <Text>Popover content here</Text>
        </Paper>
      </Popover.Dropdown>
    </Popover>
  );
};

Props

Prop	Type	Default	Description
`position`	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end'`	`'bottom'`	Popover position relative to target
`width`	`number \| 'target'`	`260`	Popover width
`radius`	`MantineNumberSize`	`'md'`	Border radius
`shadow`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Popover shadow
`withArrow`	`boolean`	`false`	If true, popover will have an arrow
`arrowSize`	`number`	`7`	Arrow size
`arrowOffset`	`number`	`5`	Arrow offset
`closeOnClickOutside`	`boolean`	`true`	If true, close on click outside
`closeOnEscape`	`boolean`	`true`	If true, close on escape key (web only)
`opened`	`boolean`		Controlled opened state
`onChange`	`(opened: boolean) => void`		Called when popover state changes
`zIndex`	`number`	`1000`	Z-index
`children` (required)	`React.ReactNode`		Popover.Target and Popover.Dropdown elements
`accessibilityLabel`	`string`		Accessibility label for the popover
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm