Miss any of our Open RFC calls?Watch the recordings here! »

use-image

1.0.6 • Public • Published

useImage React Hook

Custom React Hook for loading images. It loads passed url and creates DOM image with such src. Useful for canvas application like react-konva.

Open image demo

Install

npm install use-image

Usage

import React from 'react';
import { Image } from 'react-konva';
import useImage from 'use-image';
 
const url = 'https://konvajs.github.io/assets/yoda.jpg';
 
function SimpleApp() {  
  const [image] = useImage(url);
 
  // "image" will DOM image element or undefined
 
  return (
    <Image image={image} />
  );
}
 
function ComplexApp() {
  // set crossOrigin of image as second argument
  const [image, status] = useImage(url, 'Anonymous');
 
  // status can be "loading", "loaded" or "failed"
 
  return (
    <Image image={image} />
  );
}

License

MIT

Install

npm i use-image

DownloadsWeekly Downloads

24,022

Version

1.0.6

License

MIT

Unpacked Size

3.83 kB

Total Files

5

Last publish

Collaborators

  • avatar