@use-hooks/image-size NPM

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

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

yarn

yarn add @use-hooks/image-size

API

Params

/**
 * Params
 * @param {string} url - The image url
 */

Returns

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

Usage

import React from 'react';

import useImageSize from '@use-hooks/image-size';

export default function App() {
  const url = 'https://cdn.int64ago.org/ogk39i54.png';
  const [width, height] = useImageSize(url);

  return (
    <div>
      <h2>DEMO of <span style={{ color: '#F44336' }}>@use-hooks/image-size</span></h2>
      <div>
        <img src={url} width={100} height={100} alt="" />
        <div>Natural size: {width} x {height}</div>
      </div>
    </div>
  );
}

Live Show