Top
Window - Positioning and constraints
Window
<Window /> position can be specified by using position or defaultPosition props, the setPosition method or by keyboard navigation.
The position can be set using any or all of the four directions: top, left, right, bottom (eg: position={ bottom: 50, left: 100 }).
The onPositionChange callback prop will always be called with a position argument that has the same directions as previously specified. For example, if a position was set to be {top:20, right: 40} any position change triggered by dragging the window will have only these two directions (top and right).
This has the effect of anchoring the position to specific directions. When it is positioned top-left it will be relative to this direction so that when the browser window resizes from bottom right, the window will keep it's relative position to top-left.
It can take numeric or string values like: 500, '30%' or 'calc(30% - 20px)'.
When dragging the window, onPositionChange is called and it will always return numeric values for position.
<Window />'s position can be either controlled or uncontrolled.
For controlled behaviour, the position can be controlled with position prop, and by listening to onPositionChange.
When position is uncontrolled, position change is handled internally within component's state, an initial position can be specified width defaultPosition.
<Window /> supports the centered prop (controlled), as well as the defaultCentered uncontrolled alternative. When the user interacts with a centered <Window />, onCenteredChange(centered) is called as a result.
Note that keepCenteredOnResize is true by default, so resizing a centered <Window /> from one side will also adjust the opposite side as well. Set keepCenteredOnResize=false in order to disable the behaviour.
<Window /> can specify a constrain region which cannot leave its boundaries.
By default it is constrained to the browser viewport.