useImage React hook

I am thinking to implement useImage hook with the simple API:

import React from 'react';
import { Image, useImage } from 'react-konva';

export default function App() {
  const url = 'some-image-url';
  const image = useImage(url);
   // it will be undefined while image is loading
   // and it will be instance of window.Image when it is loaded


  return (
    <Stage width={300} heihgt={300}>
        <Layer>
            <Image image={image} />
        </Layer>
    </Stage>
  );
}

That hook will simplify current image usage https://konvajs.github.io/docs/react/Images.html

[levrik]

Why don’t implement a better Image component for that? I use the following code in my application.

class UrlImage extends Component {
  static propTypes = {
    imageUrl: PropTypes.string.isRequired
  }

  state = {
    image: null
  }

  componentDidMount() {
    this.loadImage();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.imageUrl !== this.props.imageUrl) {
      this.loadImage();
    }
  }

  loadImage = () => {
    const image = new window.Image();
    image.src = this.props.imageUrl;
    image.onload = () => {
      this.setState({
        image
      });
    }
  }

  render() {
    const { imageUrl, ...props } = this.props;
    return <Image image={this.state.image} {...props} />
  }
}

[lavrton]

https://github.com/konvajs/use-image

export default function App() {
  const url = 'https://konvajs.github.io/assets/yoda.jpg';
  const [image] = useImage(url);

  return (
    <Image image={image} />
  );
}