Floating Window

import { FloatingWindowDemos, UseFloatingWindowDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.FloatingWindow);

Usage

FloatingWindow creates a draggable element with a fixed position:

<Demo data={FloatingWindowDemos.usage} />

Constrain to viewport

Use the constrainToViewport prop to restrict element movement to the viewport boundaries. If you do not set the constrainToViewport prop, the element can be dragged outside the viewport:

<Demo data={FloatingWindowDemos.constrainToViewport} />

Constrain offset

Use the constrainOffset prop to set the offset from the viewport edges when constraining the element:

<Demo data={FloatingWindowDemos.constrainOffset} />

Drag handle selector

The dragHandleSelector prop allows specifying a selector of an element (or a group of elements) that should be used to drag the floating window. If not specified, the entire root element is used as a drag target.

The excludeDragHandleSelector prop excludes elements within dragHandleSelector from the drag event. In the following example, the close button is excluded from the drag event:

<Demo data={FloatingWindowDemos.dragHandleSelector} />

Enabled prop

Use the enabled option to enable or disable dragging:

<Demo data={FloatingWindowDemos.enabled} />

Set position

Call the setPosition function to set the position of the element programmatically. This function accepts an object with top, left, right and bottom properties, from which you should only specify two (for example, top and left, bottom and right).

<Demo data={FloatingWindowDemos.setPosition} />

Lock axis

Use the axis option to restrict movement to the specified axis:

<Demo data={FloatingWindowDemos.axis} />

use-floating-window hook

If you prefer the hook API, you can use the useFloatingWindow hook. It supports most of the FloatingWindow features:

<Demo data={UseFloatingWindowDemos.usage} />