PanArea

The PanArea component provides layout and interactions for a pannable zone of the design experience. The parent of the PanArea is responsible for responding to the user's panning events (e.g. right clicking and dragging) via the panOffsetChange prop and passing in the new panOffset.

name	type	required	comment
children	ReactNode | ReactNode[]	yes
panOffset	{ x: number; y: number }	yes	The current offset from the top-left of the pan container.
panOffsetChange	(value: { x: number; y: number }) => void	yes
allowUserPan	boolean	no	Enable or disable the user's ability to change the pan offset with a click and drag. Default value: true
animateOnPan	boolean	no	Whether to use a CSS transition to update the pan offset. Default value: false
ariaLabel	string	no
className	string	no
onAnimationEnd	() => void	no
panTransitionDuration	number	no	Duration in milliseconds of the transition from the old pan offset to the new one. Default value: 500
panTransitionTiming	string	no	The transition-timing-function for the pan transition. Default value: 'ease-in-out'
registerPanContainer	(element: HTMLDivElement) => void	no
role	AriaRole	no
style	CSSProperties	no

Result

Loading...

Live Editor

function PanAreaDemo() { const [panOffset, setPanOffset] = useState({ x: 0, y: 0 }); const panOffsetChange = (newOffset) => { setPanOffset(newOffset); }; return ( <div style={{ position: 'relative', height: '300px', border: '1px solid black' }}> <PanArea panOffset={panOffset} panOffsetChange={panOffsetChange}> <div> Right click and drag to pan. Current values: ({panOffset.x}, {panOffset.y}) </div> </PanArea> </div> ); }

function PanAreaDemo() {
    const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
    const panOffsetChange = (newOffset) => {
        setPanOffset(newOffset);
    };

    return (
        <div style={{ position: 'relative', height: '300px', border: '1px solid black' }}>
            <PanArea panOffset={panOffset} panOffsetChange={panOffsetChange}>
                <div>
                    Right click and drag to pan. Current values: ({panOffset.x}, {panOffset.y})
                </div>
            </PanArea>
        </div>
    );
}