FloatingWindow

Draggable window moved by its header bar

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

Usage

import {
  FloatingWindow,
  PortalProvider,
} from 'react-native-mantine';

// Wrap your app so the window can render in the overlay
<PortalProvider>
  <App />
</PortalProvider>

// Drag the header bar to move the window
<FloatingWindow
  title="Inspector"
  initialPosition={{ x: 12, y: 12 }}
  onPositionChange={({ x, y }) => console.log(x, y)}
  onClose={() => setOpened(false)}
  width={280}
>
  <Text size="sm">Window content</Text>
</FloatingWindow>

Props

Prop	Type	Default	Description
`children`	`ReactNode`		Window content
`title`	`ReactNode`		Title displayed in the draggable header bar
`initialPosition`	`{ x: number; y: number }`	`{ x: 20, y: 80 }`	Initial window position
`onPositionChange`	`(position: { x: number; y: number }) => void`		Called with the new position while the window is dragged
`onDragStart`	`() => void`		Called when dragging starts
`onDragEnd`	`(position: { x: number; y: number }) => void`		Called when dragging ends
`onClose`	`() => void`		Called when the close button is pressed, the button is not rendered without it
`width`	`number`	`280`	Window width in px
`zIndex`	`number`	`400`	Window z-index
`withinPortal`	`boolean`	`true`	Determines whether the window should be rendered within Portal
`portalTarget`	`string`		Portal host name used when withinPortal is set

Source on GitHub · npm