Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

joeshub/react-use-image

Open more actions menu

Repository files navigation

react-use-image

A react hook for pre-loading images.

install it

npm i react-use-image

# or

yarn add react-use-image

use it

import useImage from 'react-use-image';

const Example = ({ src }) => {
  // use the hook
  // pass it an image source url
  const { loaded } = useImage(src);

  if (!loaded) return null;

  return <img src={src} alt="Example" />;
};

input

Image URL, e.g. https://foo.com/cat.jpg

return values

{
  "loaded": false, // image found and loaded
  "failed": false, // image not found

  // actual size of the image
  "dimensions": {
    "width": 0, // width of image in pixels
    "height": 0 // height of image in pixels
  }
}

Docs

  • Storybook coming soon

Authoer

Joe Seifi

Licence

MIT

About

React hook to preload an image

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •  
Morty Proxy This is a proxified and sanitized view of the page, visit original site.