react-stick

Open documention on Github

The table shows all combinations of possible values for the position and align props. The node elements are colors in red while the anchor elements (children) are colored in blue.

inline
updateOnAnimationFrame
showNode
FPS: 0
position="top left"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="top center"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="top right"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="middle left"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="middle center"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="middle right"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="bottom left"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="bottom center"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

position="bottom right"

align="top left"

align="top center"

align="top right"

align="middle left"

align="middle center"

align="middle right"

align="bottom left"

align="bottom center"

align="bottom right"

Auto-Alignment

Vertical flipping

The node of this stick should move to the top if it can't fit to the bottom

Horizontal flipping

The node of this stick should move to the right if it can't fit to the left

Regressions

Button overlay

Stick created an element that prevented clicks to wrapped elements

Browsers:ALLStatus:Fixed

Same width

Stick node must have the same width as the anchor element, if `sameWidth` prop is set

Browsers:ALLStatus:Fixed
The stick node below should have the same width
The inline stick node below should have the same width

Stick node width

The stick node should not line-break just because the anchor node is small. The stick node must only line-break if it would not fit onto the screen otherwise.

Browsers:ALLVersion: 1.0.0Status:Fixed

with `inline` prop:

This text should stay on one line
This text should stay on one line
This text must line-break as it would reach off-screen otherwise. After we've increased page width, this text needed to be extended a bit.

Fit on page

Stick nodes should always fit into the page and never cause a horizontal scrollbar to appear, even after resize

Browsers:ALLVersion: 1.0.0Status:Fixed

SVG node as anchor

Stick should also be usable inside an SVG

Browsers:ALLVersion: 1.0.0Status:Fixed

Should not expect a style attribute

The Stick component should not expect a `style` property to be present on its props.

Browsers:ALLVersion: 2.1.0Status:Fixed
Anchor

Transport to fixed position container

The stick should be positioned correctly when transported to a container with `position: fixed`

Browsers:ALLVersion: 2.2.0Status:Fixed
(The fixed container will open at the top left. The sticked node should be attached correctly regardless of the page scroll position)

Node does not unmount on mouse leave

Move your mouse over the squares. When you're hovering one another node should be shown. However, there should always only be one node at the same time.

Browsers:ALLVersion: 3.0.3Status:Fixed

Node should scroll with anchor node

Scroll to the side. The node should move with the anchor node.

Browsers:ALLVersion: 3.0.3Status:Fixed
Scroll to the right. The node should move with this element.
This is the content of the node
This is the content of the node
This is the stick text
This text should break to respect the anchor's width
This text should stay on one line
This text should stay on one line
This text must line-break as it would reach off-screen otherwise. After we've increased page width, this text needed to be extended a bit.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Node
This node should always stick with its anchor