Layers

Every UI has stackable layers and it's important to have control over how the layers play together. Some examples of the stackable layers are tooltips, modals, popovers, select dropdowns or menus. The issues that come up along the layers usage are z-index and visibility handling, what layer goes on top. There are many other layer related issues that include focus management, hover management, keyboard navigation, click events and hotkeys usage.

Layer component renders its children into a host element, instead of the body element, using createPortal. The application needs to be wrapped in a LayersManager in order to handle the rendering into a container. If no LayersManager is added the content will be added to the body. With layers there is no need for z-index css property usage as layers completely rely on the stacking context.

Layer basic usage

Tether behavior

Tether component provides a behavior where its content positioned relatively to a provided anchor element. Popover component is a good example of the Tether component usage.

Tether basic usage

Layer API

children Node required

Content to be rendered in the Layer.

Node

host nullable HTMLElement

A DOM element where the Layer will be inserted into as a child. The host value comes from the layers context provider. If there is no LayersManager added and therefore no host element in the context, document.body will be used as a container element.

HTMLElement

index number

Defines the location (child order) at which the layer will be inserted in the host element.

mountNode HTMLElement

A custom DOM element where the layer is inserted to as a child. Note that the index prop does not work with a custom mountNode.

HTMLElement

onMount function

A handler that is called when the Layer is mounted.

() => mixed

onUnmount function

A handler that is called when the Layer is unmounted.

() => mixed

Tether API

anchorRef nullable HTMLElement = null

The reference element used to position the popper.

HTMLElement

arrowRef nullable HTMLElement

The arrow element that is passed as an arrow modifier to alter the popper positioning.

HTMLElement

popperRef nullable HTMLElement = null

The element used as a popper.

HTMLElement

children Node required

Content to be rendered in the Popper.

Node

onPopperUpdate function = () => undefined

A handler that is called when popper positioning changes.

function
arrow
top number required
left number required
popper required
top number required
left number required
,
offsets object required
arrow
top union One of
number,
null
left union One of
number,
null
popper required
top union One of
number,
null
left union One of
number,
null
placement string required
=> mixed

placement $Keys<typeof TETHER_PLACEMENT> =

Recommended placement of the popper.

$Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }

popperOptions any = {}

Options to be passes to the Popper on its initialization. Refer to the Popper documentation for the full list of available options. eslint-disable-next-line flowtype/no-weak-types