{"_id":"@agat/masonry-layout","name":"@agat/masonry-layout","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@agat/masonry-layout","version":"1.0.0","description":"A calculation for a masonry grid layout","main":"./esm/index.js","type":"module","scripts":{"test":"vitest","lint:biome":"biome check --apply ./src/","lint:ts":"tsc --noEmit","lint":"npm run lint:biome && npm run lint:ts","build":"packemon build","pack":"packemon pack --declaration","production":"npm run lint && npm run pack","release":"npm publish"},"keywords":["ts","typescript","masonry","layout"],"author":{"name":"Aleksej Romanovskij"},"license":"MIT","homepage":"https://github.com/agat/masonry-layout","repository":{"type":"git","url":"git+https://github.com/agat/masonry-layout.git"},"devDependencies":{"@biomejs/biome":"1.7.3","packemon":"4.0.1","typescript":"5.4.5","vitest":"1.6.0"},"packemon":{"platform":"browser"},"module":"./esm/index.js","_id":"@agat/masonry-layout@1.0.0","gitHead":"47b3e22577f6022a516561b58dea0a409339b87e","types":"./esm/index.d.ts","bugs":{"url":"https://github.com/agat/masonry-layout/issues"},"_nodeVersion":"20.13.1","_npmVersion":"10.4.0","dist":{"integrity":"sha512-vAApw+ipXVOjBzq2aQEZElkffOkPtLKoPhR171qvTRyxQCoyKDrhdcbqIWSdAUwMonmiVEKfdd+j5alzF+GUgQ==","shasum":"e7270e58160a44bbb0b635c02e1eceb34669fcef","tarball":"https://registry.npmjs.org/@agat/masonry-layout/-/masonry-layout-1.0.0.tgz","fileCount":26,"unpackedSize":28681,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtKj9jYQ9jZHJJHtxH8+Bzqmqrc5lydP+yDmi0s990BAIgaL6k0tHVf4YW6lZxFv70wkQzuGaXzMoOoAhEDRQ4MP4="}]},"_npmUser":{"name":"agat","email":"aleksij@gmail.com"},"directories":{},"maintainers":[{"name":"agat","email":"aleksij@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/masonry-layout_1.0.0_1716197713525_0.5155201560975349"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-20T09:35:13.409Z","1.0.0":"2024-05-20T09:35:13.734Z","modified":"2024-05-20T09:35:14.027Z"},"maintainers":[{"name":"agat","email":"aleksij@gmail.com"}],"description":"A calculation for a masonry grid layout","homepage":"https://github.com/agat/masonry-layout","keywords":["ts","typescript","masonry","layout"],"repository":{"type":"git","url":"git+https://github.com/agat/masonry-layout.git"},"author":{"name":"Aleksej Romanovskij"},"bugs":{"url":"https://github.com/agat/masonry-layout/issues"},"license":"MIT","readme":"# Masonry Grid layout\n\nA TypeScript implementation of a masonry grid layout.\n\n## Features\n\n- Automatically arranges items in a masonry grid layout\n- Typescript support with generic item data\n\n## Installation\n\n```bash\nnpm i @agat/masonry-layout\n```\n\n## Usage\n\n```ts\nimport { type ItemType, getMasonryLayout } from '@agat/masonry-layout';\n\ntype MyItemType = {\n    title: string;\n    imageUrl: string;\n};\n\nconst items: ItemType<MyItemType>[] = [\n    { size: { width: 200, height: 200 }, data: { ... } },\n    { size: { width: 100, height: 300 }, data: { ... } },\n];\n\nconst layout = getMasonryLayout(items, 640, 2, { space: 10 });\n```\n\nThe `layout` object contains the arranged `items` and the total `height` of the grid:\n\n```json\n{\n    \"items\": [\n        {\n            \"data\": { ... },\n            \"rect\": {\n                \"x\": 0,\n                \"y\": 0,\n                \"width\": 315,\n                \"height\": 315\n            }\n        },\n        {\n            \"data\": { ... },\n            \"rect\": {\n                \"x\": 325,\n                \"y\": 0,\n                \"width\": 315,\n                \"height\": 945\n            }\n        }\n    ],\n    \"height\": 945\n}\n```\n\n## API\n\n### getMasonryLayout\n\nCreates a masonry grid layout and returns the layout with `items` and total `height`.\n\n```ts\nfunction getMasonryLayout<T>(\n    items: ItemType<T>[],\n    width: number,\n    columns: number,\n    options: OptionsType = {},\n): LayoutType<T>\n```\n#### items\n\nItems array with `size` and `data` fields:\n\n```ts\n[\n    {\n        size: {\n            width: 200, // is optional\n            height: 200\n        },\n        data: { ... }\n    }\n]\n```\n\nIf a `width` is provided, a `height` value may be changed in the generated layout to save the aspect ratio value.\n\n#### width\n\nAvailable layout width. Positive number value.\n\n#### columns\n\nColumns count. Positive number value.\n\n#### options\n\n```ts\ntype OptionsType = {\n    space?: number; // grid items spacing \n};\n```\n","readmeFilename":"README.md"}