{"_id":"@rc-component/dom-align","_rev":"2-0ad095e3058c76eab4b07ba446e47f41","name":"@rc-component/dom-align","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.1":{"name":"@rc-component/dom-align","version":"2.0.1","keywords":["react","react-component","dom-align"],"license":"MIT","_id":"@rc-component/dom-align@2.0.1","maintainers":[{"name":"peachscript","email":"scdzwyxst@gmail.com"},{"name":"madccc","email":"1075746765@qq.com"},{"name":"zombiej","email":"smith3816@gmail.com"},{"name":"afc163","email":"afc163@gmail.com"}],"homepage":"http://github.com/react-component/dom-align","bugs":{"url":"http://github.com/react-component/dom-align/issues"},"dist":{"shasum":"65642016ad1a33e5683e8c7f2ea1782938af182a","tarball":"https://registry.npmjs.org/@rc-component/dom-align/-/dom-align-2.0.1.tgz","fileCount":55,"integrity":"sha512-p119myFdmVumt95ohOY4yJiaxztJoqdFKLLQd8JE/1Mg9WilwIfLUtn0JhdddDclCKnGuSSDcnqJObptwqJh+w==","signatures":[{"sig":"MEQCIAIfObgaxC0Dqafvy6bm6Sk9nSLOx/16Q7lTVFwklX96AiAj31KXs7aI0BrZShRav+5c3e5GeggTaQLhAUyOiJkthA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89224},"main":"./lib/index","types":"./lib/index.d.ts","module":"./es/index","engines":{"node":">=14.x"},"gitHead":"c1c693e95354215e9285efae268a3edfb702ab8b","scripts":{"tsc":"tsc --noEmit","lint":"eslint src/ docs/ --ext .tsx,.ts,.jsx,.js","test":"cypress run --component","build":"dumi build","start":"dumi dev","compile":"father build","test:ci":"cypress run --component --record --key $CYPRESS_RECORD_KEY","prettier":"prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"","now-build":"npm run build","prepublishOnly":"npm run compile && np --yolo --no-publish"},"_npmUser":{"name":"afc163","email":"afc163@gmail.com"},"repository":{"url":"git+ssh://git@github.com/react-component/dom-align.git","type":"git"},"_npmVersion":"9.5.0","description":"Align DOM Node Flexibly ","directories":{},"_nodeVersion":"16.19.1","dependencies":{"@babel/runtime":"^7.23.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@8.9.0","devDependencies":{"np":"^7.5.0","dumi":"^2.1.10","next":"^13.5.4","jsonp":"^0.2.1","react":"^18.2.0","eslint":"^8.51.0","father":"^4.0.0","cypress":"^13.3.1","prettier":"^2.8.8","react-dom":"^18.2.0","typescript":"5.x","@types/node":"^20.8.5","@types/react":"18.x","@umijs/fabric":"^4.0.1","normalize.css":"^8.0.1","@types/react-dom":"18.x","@cypress/code-coverage":"^3.12.3","@rc-component/father-plugin":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/dom-align_2.0.1_1697202795370_0.32101976259084086","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-10-13T13:13:15.241Z","modified":"2025-07-24T10:05:28.989Z","2.0.1":"2023-10-13T13:13:15.643Z"},"bugs":{"url":"http://github.com/react-component/dom-align/issues"},"license":"MIT","homepage":"http://github.com/react-component/dom-align","keywords":["react","react-component","dom-align"],"repository":{"url":"git+ssh://git@github.com/react-component/dom-align.git","type":"git"},"description":"Align DOM Node Flexibly ","maintainers":[{"email":"smith3816@gmail.com","name":"zombiej"},{"email":"afc163@gmail.com","name":"afc163"},{"email":"1075746765@qq.com","name":"madccc"},{"email":"scdzwyxst@gmail.com","name":"peachscript"},{"email":"wasd2144@hotmail.com","name":"chenshuai2144"}],"readme":"# @rc-component/dom-align\n\n---\n\nAlign source html element with target html element flexibly.\n\n[![NPM version][npm-image]][npm-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] ![Build Status](https://github.com/react-component/dom-align/actions/workflows/ci.yml/badge.svg) [![@rc-component/dom-align](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/bfy1u3/main&style=flat&logo=cypress)](https://cloud.cypress.io/projects/bfy1u3/runs)\n\n[npm-image]: http://img.shields.io/npm/v/@rc-component/dom-align.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/@rc-component/dom-align\n[coveralls-image]: https://img.shields.io/coveralls/react-component/dom-align.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/react-component/dom-align?branch=main\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/@rc-component/dom-align.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@rc-component/dom-align\n\n## Screenshot\n\n<img height=444 src=\"http://gtms02.alicdn.com/tps/i2/TB1XIp2HXXXXXajaXXXgJfr8XXX-548-888.png\">\n\n## Install\n\n[![@rc-component/dom-align](https://nodei.co/npm/@rc-component/dom-align.png)](https://npmjs.org/package/@rc-component/dom-align)\n\n## Feature\n\n- support Edge Chrome Firefox\n- support align points and offset\n- support auto adjust according to visible area\n\n## Usage\n\n```js\nimport domAlign from '@rc-component/dom-align';\n\n// use domAlign\n// sourceNode's initial style should be position:absolute;left:-9999px;top:-9999px;\n\nconst alignConfig = {\n  points: ['tl', 'tr'], // align top left point of sourceNode with top right point of targetNode\n  offset: [10, 20], // the offset sourceNode by 10px in x and 20px in y,\n  targetOffset: ['30%', '40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,\n  overflow: { adjustX: true, adjustY: true }, // auto adjust position when sourceNode is overflowed\n};\n\ndomAlign(sourceNode, targetNode, alignConfig);\n```\n\n## API\n\n### void domAlign(source: HTMLElement, target: HTMLElement, alignConfig: Object):Function\n\n#### alignConfig object details\n\n<table class=\"table table-bordered table-striped\">\n    <thead>\n    <tr>\n        <th style=\"width: 100px;\">name</th>\n        <th style=\"width: 50px;\">type</th>\n        <th>description</th>\n    </tr>\n    </thead>\n    <tbody>\n      <tr>\n          <td>points</td>\n          <td>String[2]</td>\n          <td>move point of source node to align with point of target node, such as ['tr','cc'],\n          align top right point of source node with center point of target node.\n          point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right)\n      </td>\n      </tr>\n      <tr>\n          <td>offset</td>\n          <td>Number[2]</td>\n          <td>offset source node by offset[0] in x and offset[1] in y. \n          If offset contains percentage string value, it is relative to sourceNode region.</td>\n      </tr>\n      <tr>\n          <td>targetOffset</td>\n          <td>Number[2]</td>\n          <td>offset target node by offset[0] in x and offset[1] in y. \n          If targetOffset contains percentage string value, it is relative to targetNode region.</td>\n      </tr>\n      <tr>\n          <td>overflow</td>\n          <td>Object: `{ adjustX: boolean, adjustY: boolean, alwaysByViewport:boolean }`</td>\n          <td>\n          if adjustX field is true, then will adjust source node in x direction if source node is invisible.\n          if adjustY field is true, then will adjust source node in y direction if source node is invisible.\n          if alwaysByViewport is true, the it will adjust if node is not inside viewport\n          </td>\n      </tr>\n      <tr>\n          <td>useCssRight</td>\n          <td>Boolean</td>\n          <td>whether use css right instead of left to position</td>\n      </tr>\n      <tr>\n          <td>useCssBottom</td>\n          <td>Boolean</td>\n          <td>whether use css bottom instead of top to position</td>\n      </tr>\n      <tr>\n          <td>useCssTransform</td>\n          <td>Boolean</td>\n          <td>whether use css transform instead of left/top/right/bottom to position if browser supports.\n          Defaults to false.</td>\n      </tr>\n    </tbody>\n</table>\n\n## Development\n\n```\npnpm install\npnpm start\n```\n\n## Example\n\nhttp://localhost:8000/\n\n## License\n\n@rc-component/dom-align is released under the MIT license.\n","readmeFilename":"README.md"}