{"library":"rc-align","title":"React Alignment Component","description":"`rc-align` is a React UI component designed for precise element alignment within a web page, acting as a React wrapper for the `dom-align` library. It enables dynamic positioning of a child element relative to a target, supporting various target types including other DOM elements or specific page coordinates. The current stable version is 4.0.15, with a v5 pre-release indicating upcoming architectural changes. The library maintains a moderate release cadence, addressing bugs and adding features periodically. Key differentiators include its robust underlying `dom-align` logic, support for realigning on window resize, and a focus on providing a declarative React interface for complex positioning scenarios. It ships with TypeScript types for improved developer experience and integrates seamlessly into React applications requiring dynamic UI positioning.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-align"],"cli":null},"imports":["import Align from 'rc-align';","const Align = require('rc-align');","import type { AlignProps } from 'rc-align';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Align from 'rc-align';\n\nconst MyAlignedComponent: React.FC = () => {\n  const targetRef = React.useRef<HTMLDivElement>(null);\n  const sourceRef = React.useRef<HTMLDivElement>(null);\n\n  // In a real application, ensure the target is mounted before alignment logic runs.\n  // This simple example assumes static target.\n\n  const getTarget = () => targetRef.current;\n\n  return (\n    <div style={{ padding: '50px', position: 'relative', minHeight: '300px' }}>\n      <div\n        ref={targetRef}\n        style={{\n          width: '100px',\n          height: '100px',\n          border: '2px solid blue',\n          position: 'absolute',\n          top: '150px',\n          left: '150px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          background: '#e0f7fa'\n        }}\n      >\n        Target Element\n      </div>\n\n      <Align\n        target={getTarget}\n        align={{\n          points: ['tl', 'bl'], // Align top-left of source to bottom-left of target\n          offset: [0, 10], // Offset by 10px down\n          overflow: {\n            adjustX: true,\n            adjustY: true\n          }\n        }}\n        monitorWindowResize={true}\n        onAlign={(sourceElement, alignConfig) => {\n          console.log('Aligned!', sourceElement, alignConfig);\n        }}\n      >\n        <div\n          ref={sourceRef}\n          style={{\n            width: '120px',\n            height: '50px',\n            border: '2px solid red',\n            background: '#ffebee',\n            zIndex: 100, // Ensure it's above other elements if positioned absolutely\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center'\n          }}\n        >\n          Source Element\n        </div>\n      </Align>\n    </div>\n  );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  ReactDOM.render(<MyAlignedComponent />, rootElement);\n} else {\n  console.error(\"Root element not found. Please ensure an element with id 'root' exists in your HTML.\");\n}","lang":"typescript","description":"This quickstart demonstrates how to use `rc-align` to position a 'source' React element relative to a 'target' DOM element. It utilizes `useRef` for element references, configures alignment points, an offset, and enables realignment on window resize.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}