{"id":17060510,"url":"https://github.com/e-oj/use-magic-grid","last_synced_at":"2026-03-02T23:31:17.741Z","repository":{"id":252446196,"uuid":"834227244","full_name":"e-oj/use-magic-grid","owner":"e-oj","description":"Official React port of the magic-grid library ","archived":false,"fork":false,"pushed_at":"2024-09-03T08:21:47.000Z","size":82215,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T18:14:05.041Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-magic-grid","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/e-oj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-26T17:46:22.000Z","updated_at":"2025-02-22T21:05:20.000Z","dependencies_parsed_at":"2024-08-09T20:49:00.931Z","dependency_job_id":"95661020-ecb7-4d2e-a318-16effd77de8c","html_url":"https://github.com/e-oj/use-magic-grid","commit_stats":null,"previous_names":["e-oj/magic-grid-react","e-oj/use-magic-grid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fuse-magic-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fuse-magic-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fuse-magic-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-oj%2Fuse-magic-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/e-oj","download_url":"https://codeload.github.com/e-oj/use-magic-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610336,"owners_count":21132920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T10:44:14.241Z","updated_at":"2026-03-02T23:31:12.716Z","avatar_url":"https://github.com/e-oj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-magic-grid\n\n## Official React port of the [magic-grid](https://github.com/e-oj/Magic-Grid) library\n\n\u003cimg src=\"https://drive.google.com/u/1/uc?id=1UaszcWA83aaLl0ZPAUtZW4K-qfuyJz7Z\u0026export=download\" alt=\"demo\" width=\"850\"\u003e\u003c/img\u003e\n\n### Getting Started\n#### Step 1\n\nGet Magic Grid via NPM:\n\n```\nnpm install use-magic-grid\n```\n\n#### Step 2 \n\nImport the `useMagicGrid` hook:\n\n```javascript\nimport { useMagicGrid } from 'use-magic-grid';\n```\n\nor\n\n```js\nconst { useMagicGrid } = require('use-magic-grid');\n```\n\n#### Step 3\n\nYou're good to go!\n\n```javascript\nconst magicGrid = useMagicGrid(...);\n```\n\n### Usage\n**Note: You don't have to call `magicGrid.listen` when using this hook**\n\n#### Static content:\nIf your container doesn't have any dynamically loaded content i.e., all its child elements are always in the DOM, the `items` property is not necessary. You should initialize the grid this way:\n```javascript\nconst magicGrid = useMagicGrid({\n  container: \"#container\", // Required. Can be a class, id, or an HTMLElement.\n  animate: true, // Optional.\n});\n```\n\n#### Dynamic content:\nIf the container relies on data from an api, or experiences a delay, for whatever reason, before it can render its content in the DOM, you need to let the grid know the number of items to expect:\n```javascript\nconst  magicGrid = useMagicGrid({\n  container: \"#container\", // Required. Can be a class, id, or an HTMLElement.\n  items: 20, // For a grid with 20 items. Required for dynamic content.\n  animate: true, // Optional.\n});\n```\n\n### API\nCheck the [magic-grid docs](https://github.com/e-oj/Magic-Grid?tab=readme-ov-file#api) for the full list of available functions\n\n#### useMagicGrid(config)\n\u003e config (required): Configuration object\n\nInitializes the grid with a configuration object, positions items and starts listening for changes to the container size.\n```javascript\nconst magicGrid = useMagicGrid({\n  container: \"#container\", // Required. Can be a class, id, or an HTMLElement\n  items: 30, // Optional. Number of items that should be present before initial positioning. Default: 1.\n  gutter: 30, // Optional. Space between items. Default: 25(px).\n  maxColumns: 5, // Optional. Maximum number of columns. Default: Infinite.\n  useMin: true, // Optional. Prioritize shorter columns when positioning items? Default: false.\n  useTransform: true, // Optional. Position items using CSS transform? Default: True.\n  animate: true, // Optional. Animate item positioning? Default: false.\n  center: true, //Optional. Center the grid items? Default: true. \n});\n```\n\n---\n\n#### .positionItems()\nThis function is useful in cases where you have to manually trigger a repositioning; for instance, if a new element is added to the container.\n\n```javascript\nconst magicGrid = useMagicGrid({\n  container: \"#container\", // Required. Can be a class, id, or an HTMLElement\n  animate: true, // Optional\n});\n\n// get data from api\n// append new element to DOM\n\n// reposition items\nmagicGrid.positionItems();\n```\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-oj%2Fuse-magic-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fe-oj%2Fuse-magic-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-oj%2Fuse-magic-grid/lists"}