initial version

Author: lavrton

.gitignore

@@ -0,0 +1,2 @@
+# Dependency directories
+node_modules/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,37 @@
+# useImage React Hook
+
+Custom React Hook for loading images.
+
+## Install
+
+```bash
+npm install use-image
+```
+
+
+## Usage
+
+```js
+import React from 'react';
+import { Image } from 'react-konva';
+import useImage from 'use-image';
+
+export default function App() {
+  const url = 'https://cdn.int64ago.org/ogk39i54.png';
+  let { image, status } = useImage(url);
+
+  // image is DOM image element or undefined
+  // image will be undefined while its loading or loading is failed
+
+  // status can be "loading", "loaded" or "failed"
+
+  return (
+    <Image image={image} />
+  );
+}
+
+```
+
+## License
+
+MIT

index.js

@@ -0,0 +1,31 @@
+var React = require('react');
+
+var defaultState = { image: undefined, status: 'loading' };
+
+module.exports = function useImage(url) {
+  var res = React.useState(defaultState);
+  var image = res[0].image;
+  var status = res[0].status;
+
+  var setState = res[1];
+
+  React.useEffect(
+    function() {
+      if (!url) return;
+      const img = document.createElement('img');
+      img.addEventListener('load', function() {
+        setState({ image: img, status: 'loaded' });
+      });
+      img.addEventListener('error', function() {
+        setState({ image: undefined, status: 'failed' });
+      });
+      img.src = url;
+    },
+    [url]
+  );
+
+  // return array because it it better to use in case of several useImage hooks
+  // const [background, backgroundStatus] = useImage(url1);
+  // const [patter] = useImage(url2);
+  return [image, status];
+};

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "use-image",
+  "version": "0.5.0",
+  "description": "Custom React Hook for loading images.",
+  "main": "index.js",
+  "files": [
+    "index.js"
+  ],
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/konvajs/use-image.git"
+  },
+  "keywords": [
+    "react",
+    "react-hooks",
+    "canvas",
+    "image"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/konvajs/use-image/issues"
+  },
+  "homepage": "https://github.com/konvajs/use-image/",
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  }
+}