Simple API to create multi layered UI
- layers - automatic ordering of nested layers
- backdrop - hide / block background or keep a layer as part of the flow
- focus
- Tab between layers
- trap focus above backdrop
- re-focus when blocking layer close
- focusChange notification when focus outside / inside logical layer
- click outside - notification for click outside of logical layer
- mouse interaction - notification for mouse enter / leave of logical layer
- escape catching - notification for escape press
- server rendering - single pass nested rendering of layers in the server
- component primitives - Tooltip, Popover, Modal
- typed - built with TypeScript
- tested - tested in a browser
- components - published for multiple libraries / frameworks (React, Svelte & more to come...)
- read the docs
- pick your renderer:
| Package | Published | Size |
|---|---|---|
| React | ||
| Svelte |
The main issue with displacing DOM is that there is no way to tell the browser that the content inside a layer is meant to be nested inside the origin of the layer.
This is notable in 2 areas:
- Events propagation between layers (unless specifically handled by the renderer (e.g. React native event propagation within Portal).
- styling with CSS selectors across layers.
- ARIA support - build in accessibility support
- style support - control overlay, tooltip/popover arrow
- ordering logic - application level re-ordering of layers