{"versions":{"0.0.1":{"version":"0.0.1","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":120,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@alita/inspx","author":{"name":"raunofreiberg"},"module":"dist/inspx.esm.js","devDependencies":{"@types/react":"^17.0.3","@types/react-dom":"^17.0.3","husky":"^6.0.0","postcss":"^8.2.12","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-postcss":"^4.0.0","tsdx":"^0.14.1","tslib":"^2.2.0","typescript":"^4.2.4"},"dependencies":{"@radix-ui/popper":"^0.0.10"},"description":"Pixel perfect layout inspection.","repository":{"type":"git","url":"git+https://github.com/raunofreiberg/inspx.git"},"bugs":{"url":"https://github.com/raunofreiberg/inspx/issues"},"homepage":"https://github.com/raunofreiberg/inspx#readme","publishConfig":{"access":"public"},"gitHead":"95839fabfa0b5a9b991bbc3dfee63b7dfd58657c","_id":"@alita/inspx@0.0.1","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-jCfKTA7UjZ4GOsnVTwNcmrRJ6ev7cWpVazckl8unHgEF2BPYhRkHWqgHiy7YY6RcJL+XZ1xau5yU8FxffMPtig==","shasum":"64a23ab55de515693731845642c98af355430915","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@alita/inspx/-/inspx-0.0.1.tgz","fileCount":13,"unpackedSize":107003,"size":19890},"_npmUser":{"name":"anonymous","email":"448627663@qq.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"437132124@qq.com"},{"name":"anonymous","email":"1270253618@qq.com"},{"name":"anonymous","email":"fanluan058@gmail.com"},{"name":"anonymous","email":"448627663@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/inspx_0.0.1_1636094739128_0.14655928506713867"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-22T12:38:29.337Z","contributors":[]},"0.0.2":{"version":"0.0.2","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":120,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@alita/inspx","author":{"name":"raunofreiberg"},"module":"dist/inspx.esm.js","devDependencies":{"@types/react":"^17.0.3","@types/react-dom":"^17.0.3","husky":"^6.0.0","postcss":"^8.2.12","react":"18.0.0-alpha-f2c381131-20211004","react-dom":"18.0.0-alpha-f2c381131-20211004","rollup-plugin-postcss":"^4.0.0","tsdx":"^0.14.1","tslib":"^2.2.0","typescript":"^4.2.4"},"dependencies":{"@radix-ui/popper":"^0.0.10"},"description":"Pixel perfect layout inspection.","repository":{"type":"git","url":"git+https://github.com/alitajs/inspx.git"},"bugs":{"url":"https://github.com/alitajs/inspx/issues"},"homepage":"https://github.com/alitajs/inspx#readme","publishConfig":{"access":"public"},"gitHead":"95839fabfa0b5a9b991bbc3dfee63b7dfd58657c","_id":"@alita/inspx@0.0.2","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-NylAZjHY1jIyO5a58WaPSzZbR39idg8tGyUl4YLBiSmU0lvkl/K9C77TexPQMUHhzauelmmhBht2FRoA77U0tQ==","shasum":"af3c4e864facb923f340c7a8321eb40859957fbb","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@alita/inspx/-/inspx-0.0.2.tgz","fileCount":13,"unpackedSize":107033,"size":19920},"_npmUser":{"name":"anonymous","email":"448627663@qq.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"437132124@qq.com"},{"name":"anonymous","email":"1270253618@qq.com"},{"name":"anonymous","email":"fanluan058@gmail.com"},{"name":"anonymous","email":"448627663@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/inspx_0.0.2_1636096095669_0.48348521386112653"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-22T12:38:31.172Z","contributors":[]}},"dist-tags":{"latest":"0.0.2"},"name":"@alita/inspx","time":{"created":"2022-01-27T13:54:11.745Z","modified":"2025-06-03T06:35:41.268Z","0.0.1":"2021-11-05T06:45:39.318Z","0.0.2":"2021-11-05T07:08:15.925Z"},"readme":"![image](/www/public/og.png)\n\n## inspx\n\n![npm](https://img.shields.io/npm/v/inspx?style=flat&colorA=000000&colorB=000000)\n\nPixel perfect layout inspection.\n\n> Built for React as a proof of concept.\n\n## Setup\n\nInstall the package:\n\n```sh\nnpm install inspx --save-dev\n```\n\nWrap the root of your application or arbitrary component trees:\n\n```tsx\nimport Inspect from 'inspx';\n\n\n \n\n```\n\n## Usage\n\nInspect elements by hovering an element and holding Option (⌥) simultaneously.\n\n![demo](/public/demo.gif)\n\nBy default, any element with padding, margin, or width and height is inspectable.\n\nYou can disable certain properties:\n\n```tsx\n\n \n\n```\n\n## Configuration\n\nBy default, the component will only be enabled in the development environment.\n\nYou can configure this behavior with the `disabled` prop:\n\n```tsx\n\n \n\n```\n\nOptionally, you can leverage code splitting by wrapping the exported component and using your own instead.\n\n> The library is lightweight enough for this to likely be a premature and insignificant optimization.\n\n```tsx\nimport * as React from 'react';\nimport { InspectProps } from 'inspx';\n\nconst Inspect = React.lazy(() => import('inspx'));\n\nexport default function Loader(props: InspectProps) {\n if (process.env.NODE_ENV === 'production') {\n return props.children;\n }\n return (\n \n \n \n );\n}\n```","users":{}}