ClickHandlerBox

The ClickHandlerBox is a wrapper around a regular div that provides callbacks for some typical mouse events, like clicking and dragging.

name	type	required	comment
id	string	yes
ariaLabel	string	no
boxPosition	{ height?: number; left?: number; rotate?: number; top?: number; width?: number }	no	Optionally transform the dimensions and position of the underlying div
children	ReactNode | ReactNode[]	no
className	string	no
onClick	(eventValues: PointerEventValues) => void	no
onDragEnd	(eventValues: PointerEventValues) => void	no
onDragMove	(eventValues: PointerEventValues) => void	no
onDragStart	(eventValues: PointerEventValues) => void	no
onInteractEnd	(eventValues: PointerEventValues) => void	no
onInteractStart	(eventValues: PointerEventValues) => void	no
onPointerEnter	(eventValues: PointerEvent<Element>) => void	no
onPointerLeave	(eventValues: PointerEvent<Element>) => void	no
onPointerMove	(eventValues: PointerEvent<Element>) => void	no
role	AriaRole	no
style	CSSProperties	no

Demo

Result

Loading...

Live Editor

function ClickHandlerBoxDemo() { const [isDragging, setIsDragging] = useState(false); const [isInteracting, setIsInteracting] = useState(false); const [count, setCount] = useState(0); return ( <div> <div>Clicks: {count}</div> <div>Interacting: {isInteracting ? 'true' : 'false'}</div> <div>Dragging: {isDragging ? 'true' : 'false'}</div> <ClickHandlerBox style={{ width: 100, height: 100, background: 'red', userSelect: 'none' }} onClick={() => { setCount(count + 1); }} onInteractStart={() => { setIsInteracting(true); }} onInteractEnd={() => { setIsInteracting(false); }} onDragStart={() => { setIsDragging(true); }} onDragEnd={() => { setIsDragging(false); }} > Click and drag me! </ClickHandlerBox> </div> ); }

function ClickHandlerBoxDemo() {
    const [isDragging, setIsDragging] = useState(false);
    const [isInteracting, setIsInteracting] = useState(false);
    const [count, setCount] = useState(0);

    return (
        <div>
            <div>Clicks: {count}</div>
            <div>Interacting: {isInteracting ? 'true' : 'false'}</div>
            <div>Dragging: {isDragging ? 'true' : 'false'}</div>
            <ClickHandlerBox
                style={{ width: 100, height: 100, background: 'red', userSelect: 'none' }}
                onClick={() => {
                    setCount(count + 1);
                }}
                onInteractStart={() => {
                    setIsInteracting(true);
                }}
                onInteractEnd={() => {
                    setIsInteracting(false);
                }}
                onDragStart={() => {
                    setIsDragging(true);
                }}
                onDragEnd={() => {
                    setIsDragging(false);
                }}
            >
                Click and drag me!
            </ClickHandlerBox>
        </div>
    );
}