rc-align

import React from 'react'; import ReactDOM from 'react-dom'; import Align from 'rc-align'; const MyAlignedComponent: React.FC = () => { const targetRef = React.useRef<HTMLDivElement>(null); const sourceRef = React.useRef<HTMLDivElement>(null); // In a real application, ensure the target is mounted before alignment logic runs. // This simple example assumes static target. const getTarget = () => targetRef.current; return ( <div style={{ padding: '50px', position: 'relative', minHeight: '300px' }}> <div ref={targetRef} style={{ width: '100px', height: '100px', border: '2px solid blue', position: 'absolute', top: '150px', left: '150px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#e0f7fa' }} > Target Element </div> <Align target={getTarget} align={{ points: ['tl', 'bl'], // Align top-left of source to bottom-left of target offset: [0, 10], // Offset by 10px down overflow: { adjustX: true, adjustY: true } }} monitorWindowResize={true} onAlign={(sourceElement, alignConfig) => { console.log('Aligned!', sourceElement, alignConfig); }} > <div ref={sourceRef} style={{ width: '120px', height: '50px', border: '2px solid red', background: '#ffebee', zIndex: 100, // Ensure it's above other elements if positioned absolutely display: 'flex', alignItems: 'center', justifyContent: 'center' }} > Source Element </div> </Align> </div> ); }; const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.render(<MyAlignedComponent />, rootElement); } else { console.error("Root element not found. Please ensure an element with id 'root' exists in your HTML."); }