![\"react-image-size\"](\"https://akrupa1512-common-public.s3.eu-central-1.amazonaws.com/images/react-image-size-logo.png\"){kind=logo}
\n\n[](https://www.npmjs.com/package/react-image-size)\n[](https://bundlejs.com/?q=react-image-size)\n[](https://www.npmjs.com/package/react-image-size)\n[](https://www.npmjs.com/package/react-image-size)\n[](https://github.com/andreyk1512/react-image-size/blob/main/LICENSE)\n\n**react-image-size** is a tiny, zero-dependency React library for getting the intrinsic width and height of any image from its URL. Ships with a React hook and a standalone async utility — both fully typed.\n\n---\n\n## Features\n\n- **React hook** — `useImageSize` with `loading` and `error` state out of the box\n- **Standalone function** — `getImageSize` for use outside of React components\n- **Result caching** — repeated calls with the same URL return instantly from cache; configure freshness with `staleTime`\n- **Request deduplication** — concurrent calls for the same URL share one in-flight request\n- **Abort support** — cancel in-flight requests via `AbortSignal`\n- **Retry support** — automatically retry failed loads with exponential backoff\n- **Lazy loading** — skip fetching until `enabled: true`\n- **Manual refetch** — call `refetch()` to bypass cache and re-fetch on demand\n- **Keep previous data** — hold old dimensions + `isPreviousData` flag while new URL loads\n- **CORS support** — configure `crossOrigin` attribute per request\n- **Timeout support** — reject slow image loads automatically\n- **SSR safe** — no crash in server-side rendering environments\n- **Dual ESM / CJS** — works with any bundler or module system\n- **Zero dependencies** — no runtime deps beyond React itself\n- **Fully typed** — written in TypeScript, types included\n\n---\n\n## Installation\n\n```sh\nnpm install react-image-size\n```\n\n```sh\nyarn add react-image-size\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useImageSize } from 'react-image-size';\n\nfunction ImageInfo() {\n const [dimensions, { loading, error }] = useImageSize('https://example.com/photo.jpg');\n\n if (loading) return Loading...
;\n if (error) returnError: {error}
;\n\n return (\n\n {dimensions?.width} × {dimensions?.height}\n
\n );\n}\n```\n\n---\n\n## Usage\n\n### `useImageSize` hook\n\nThe hook fetches image dimensions reactively. It re-fetches automatically when the URL or options change. Pending requests are automatically cancelled when the URL changes or the component unmounts.\n\n```tsx\nimport { useImageSize } from 'react-image-size';\n\nconst [dimensions, { loading, error }] = useImageSize(url, options);\n```\n\n**With timeout and retries:**\n\n```tsx\nconst [dimensions, { loading, error }] = useImageSize(url, {\n timeout: 5000,\n retries: 2,\n});\n```\n\n**Lazy loading — fetch only when ready:**\n\n```tsx\nconst [dimensions, { loading, error }] = useImageSize(url, {\n enabled: !!url,\n});\n```\n\n**No flash on URL change with `keepPreviousData`:**\n\n```tsx\nconst [dimensions, { loading, error, isPreviousData }] = useImageSize(url, {\n keepPreviousData: true,\n});\n// dimensions holds the previous image's size while the new one loads\n// isPreviousData is true while the new URL is in-flight\n```\n\n**Manual refetch:**\n\n```tsx\nconst [dimensions, { loading, refetch }] = useImageSize(url);\n\n// Re-fetch on demand — bypasses cache\n\n```\n\n**Stale-while-revalidate with `staleTime`:**\n\n```tsx\nconst [dimensions, { loading }] = useImageSize(url, {\n staleTime: 60_000, // cache is fresh for 60s; re-fetch after that\n});\n```\n\n**CORS image:**\n\n```tsx\nconst [dimensions, { loading, error }] = useImageSize(url, {\n crossOrigin: 'anonymous',\n});\n```\n\n**Full example:**\n\n```tsx\nfunction Avatar({ src }: { src: string }) {\n const [dimensions, { loading, error }] = useImageSize(src, {\n enabled: !!src,\n keepPreviousData: true,\n retries: 2,\n timeout: 5000,\n });\n\n if (loading) return