https://github.com/sebkolind/use-image-dimensions
A React Hook that loads image dimensions from any URL.
https://github.com/sebkolind/use-image-dimensions
react react-hook react-hooks reacthook reacthooks reactjs
Last synced: 8 months ago
JSON representation
A React Hook that loads image dimensions from any URL.
- Host: GitHub
- URL: https://github.com/sebkolind/use-image-dimensions
- Owner: sebkolind
- License: mit
- Created: 2022-10-05T15:02:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-15T06:03:04.000Z (over 1 year ago)
- Last Synced: 2025-05-06T20:56:48.982Z (8 months ago)
- Topics: react, react-hook, react-hooks, reacthook, reacthooks, reactjs
- Language: TypeScript
- Homepage:
- Size: 45.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# use-image-dimensions
A React Hook that loads image dimensions from any URL. Supports `@2, @3, @4, @x` images out of the box.
## Installation
```sh
npm install @sebkolind/use-image-dimensions
```
## Use Case
This 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.
It will help you avoid layout shifts when the image is loaded.
## Usage
```jsx
import {useImageDimensions} from '@sebkolind/use-image-dimensions'
const url = 'image-url@2.jpg'
const Component = () => {
/**
* If the image URL contains a zoom multiplier (@2, @3, @4),
* the dimensions will be calculated by dividing width/height with the multiplier.
*/
const {width, height} = useImageDimensions(url,
{
/**
* Optional
*
* If you are concerned with UI flickering this could be helpful.
* Potential zoom multiplier will not be taken into consideration here,
* as this is a manual override of the hooks functionality.
*/
initialDimensions: {
width: 300,
height: 120,
}
}
)
return (
)
}
```