react-stick

react-stick

Stick is a component that allows to attach an absolutely positioned node to a statically positioned anchor element. Per default, the node will be rendered in a portal as a direct child of the body element.

npm install --save react-stick

import Stick from 'react-stick'

<Stick node={<p>The stick node</p>} position="bottom center" align="top center">
  <p>The anchor node</p>
</Stick>

Props

prop name	type	description
children	node	The content of the anchor element
node	node	The node to stick to the anchor element
position	one of: "bottom left", "bottom center", "bottom right", "middle left", "middle center", "middle right", "top left", "top center", "top right" (default value: "bottom left")	The reference point on the anchor element at which to position the stick node
align	one of: "bottom left", "bottom center", "bottom right", "middle left", "middle center", "middle right", "top left", "top center", "top right" (default value depends on the position)	The alignment of the stick node. You can also think of this as the reference point on the stick node that is placed on the position reference point of the anchor node. For example position="top left" align="bottom right" means "put the bottom right point of the stick not onto the top left point of the anchor node".
sameWidth	boolean	If set to true, the container of the stick node will have the same width as the anchor node. This enforces a maximum width on the content of the stick node.
autoFlipVertically	boolean	If a node has been attached to the bottom but there isn't enough space on the screen it will automatically be positioned to the top.
autoFlipHorizontally	boolean	If a node has been attached to the left but there isn't enough space on the screen it will automatically be positioned to the right.
onClickOutside	function: (event: Event) => void	A handler that is called on every click on any element outside of the anchor element and the stick node.
inline	boolean	If set to true, the stick node will not be rendered detached but inside the same container as the anchor node.
updateOnAnimationFrame	boolean	If set to true, will update the stick node position on every animation frame. Per default, it will only update on idle callback.
component	string	Pass any string-type React component that shall be rendered as the wrapper element around the children. Per default, "div" is used.