Window - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Window /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/Window and @zippytech/react-toolkit/Window/index.css.
This is the most basic setup for a <Window />. In the following sections we'll explore how to use the <Window /> in various scenarios, supported props, theming, etc.
There's one very important thing to know about <Window /> components: they are relative to an element in their positioning.
By default, <Window /> components are positioned relative to their offsetParent (their first non-static parent), but when maximized, they are configured to be relative to the viewport, since relativeToViewportWhenMaximized=true by default.
See the controlled relativeToViewport prop and its uncontrolled defaultRelativeToViewport alternative to find out more.
<Window /> components can be rendered as modal and can also capture tab navigation (see captureTabNavigation). See the example below.
The <Window /> position and size can be controlled via keyboard keys.
To change the position of the window using the keyboard, set enableKeyboardPositionChange to true, then focus <Window /> (click) and press up|down|left|right.
You can also change the step by which the position is changed, using the keyboardPositionChangeStep prop. The <Window /> below is also configured with keepAspectRatio.
To change the size of the window with the keyboard, set enableKeyboardSizeChange to true, then focus <Window /> (click) and press the meta key + arrows keys - eg, on mac: ⌘ + up|down|left|right keys..
You can change the step by which the size is changed, using the keyboardSizeChangeStep prop.