Custom React Hooks for image natural size
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ chore: update eslint rule Dec 13, 2018
example
src fix: remove unused code Feb 7, 2019
.babelrc
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
webpack.config.js fix: fix webpack resolve suffix Dec 13, 2018

README.md

react-hooks-image-size

NPM version npm download Build Status

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

Development

Node >= v8 LTS

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

License

MIT

Generated by create-react-hooks.