react-hooks-image-size

Custom React Hooks for image natural size.

Install

Note: Make sure that you have installed the correct version of react(>= v16.8.0) and react-dom(>= v16.8.0).

npm

1npm install --save @use-hooks/image-size

yarn

1yarn add @use-hooks/image-size

API

Params

1/**
2 * Params
3 * @param {string} url - The image url
4 */

Returns

1/**
2 * Returns
3 * @param {array} size - The image size [width, height]
4 */

Usage

1import React from 'react';
2
3import useImageSize from '@use-hooks/image-size';
4
5export default function App() {
6  const url = 'https://cdn.int64ago.org/ogk39i54.png';
7  const [width, height] = useImageSize(url);
8
9  return (
10    <div>
11      <h2>DEMO of <span style={{ color: '#F44336' }}>@use-hooks/image-size</span></h2>
12      <div>
13        <img src={url} width={100} height={100} alt="" />
14        <div>Natural size: {width} x {height}</div>
15      </div>
16    </div>
17  );
18}
19

Live Show

Development

Node >= v8 LTS

• Clone the project to local disk
• npm install
• npm start

License

MIT

Generated by create-react-hooks.