{"id":27920299,"url":"https://github.com/sebkolind/use-image-dimensions","last_synced_at":"2026-04-26T22:31:27.034Z","repository":{"id":148050058,"uuid":"546121296","full_name":"sebkolind/use-image-dimensions","owner":"sebkolind","description":"A React Hook that loads image dimensions from any URL.","archived":false,"fork":false,"pushed_at":"2024-08-15T06:03:04.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-16T22:07:07.633Z","etag":null,"topics":["react","react-hook","react-hooks","reacthook","reacthooks","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sebkolind.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-05T15:02:09.000Z","updated_at":"2024-08-15T13:32:45.000Z","dependencies_parsed_at":"2025-05-06T20:58:19.167Z","dependency_job_id":null,"html_url":"https://github.com/sebkolind/use-image-dimensions","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/sebkolind/use-image-dimensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebkolind%2Fuse-image-dimensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebkolind%2Fuse-image-dimensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebkolind%2Fuse-image-dimensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebkolind%2Fuse-image-dimensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebkolind","download_url":"https://codeload.github.com/sebkolind/use-image-dimensions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebkolind%2Fuse-image-dimensions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32315711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T21:09:39.134Z","status":"ssl_error","status_checked_at":"2026-04-26T21:09:21.240Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","react-hook","react-hooks","reacthook","reacthooks","reactjs"],"created_at":"2025-05-06T20:57:47.598Z","updated_at":"2026-04-26T22:31:27.012Z","avatar_url":"https://github.com/sebkolind.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-image-dimensions\nA React Hook that loads image dimensions from any URL. Supports `@2, @3, @4, @x` images out of the box.\n\n## Installation\n\n```sh\nnpm install @sebkolind/use-image-dimensions\n```\n\n## Use Case\n\nThis hook is useful if you need to know the dimensions of an image before it is loaded. This can be useful for layout calculations or for preloading images.\nIt will help you avoid layout shifts when the image is loaded.\n\n## Usage\n\n```jsx\nimport {useImageDimensions} from '@sebkolind/use-image-dimensions'\n\nconst url = 'image-url@2.jpg'\n\nconst Component = () =\u003e {\n  /**\n   * If the image URL contains a zoom multiplier (@2, @3, @4),\n   * the dimensions will be calculated by dividing width/height with the multiplier.\n   */\n  const {width, height} = useImageDimensions(url,\n    {\n      /**\n       * Optional\n       *\n       * If you are concerned with UI flickering this could be helpful.\n       * Potential zoom multiplier will not be taken into consideration here,\n       * as this is a manual override of the hooks functionality.\n       */\n      initialDimensions: {\n        width: 300,\n        height: 120,\n      }\n    }\n  )\n  \n  return (\n    \u003cimg src={url} width={width} height={height} /\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebkolind%2Fuse-image-dimensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebkolind%2Fuse-image-dimensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebkolind%2Fuse-image-dimensions/lists"}