react-positioner

react-positioner

A small utility component that positions a container relative to a root.

Example Usage:

import Positioner from "react-positioner";

function Tooltip({ position, content, children, ...rest }) {
    return (
        <Positione {...rest}
            content={
                <span className={`tooltip tooltip--${position}`}>
                    {content}
                </span>
            }
            isShown={visible}
            position={position}>
            {children}
        </Positioner>
    )
}

Props

Prop	Type	Required	Default Value	Description
position	"top" | "left" | "right" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right"	Yes		The position of the container relative to the target element
targetOffset	number	No		The distance from the target element in pixels.
bodyOffset	number	No		Distance from the edge of the screen.
isShown	boolean	Yes		Tell the positioner if the element is shown or not. Great when you want to use with a tooltip or some other, popup container.
children	React.Node	Yes		The target element of the positioned container
content	React.Node	Yes		The content inside the positioned container