Updated hook useTexture

README.md

@@ -170,7 +170,7 @@ useInteraction(
 
 #### Render texture image
 ```ts
-<Texture name={string} clone={boolean?} />
+<Texture name={string} />
 ```
 
 .

dist/adapter.d.ts

@@ -0,0 +1 @@
+export {};

dist/components/texture.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 type Props = {
     name: string;
-    clone?: boolean;
 };
 export declare const Texture: React.FC<Props>;
 export {};

dist/hooks/use-texture.d.ts

@@ -3,4 +3,4 @@
  *
  * @param key - Texture key
  */
-export declare function useTexture(key: string): HTMLImageElement;
+export declare function useTexture(key: string): string;

dist/types/texture.d.ts

@@ -0,0 +1,3 @@
+export type HTMLTextureElement = HTMLImageElement & {
+    originBlob: Blob;
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "phaser-react-ui",
   "description": "React interface render for Phaser engine",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "keywords": [
     "phaser",
     "interface",

src/adapter.ts

@@ -0,0 +1,14 @@
+import Phaser from 'phaser';
+import { HTMLTextureElement } from './types/texture';
+
+const defaultFunction = Phaser.Loader.File.createObjectURL;
+
+Phaser.Loader.File.createObjectURL = function createObjectURL(
+  image: HTMLTextureElement,
+  blob: Blob,
+  defaultType: string,
+) {
+  // eslint-disable-next-line no-param-reassign
+  image.originBlob = blob;
+  defaultFunction.call(this, image, blob, defaultType);
+};

src/components/texture.tsx

@@ -1,21 +1,13 @@
-import React, { useRef, useLayoutEffect } from 'react';
+/* eslint-disable jsx-a11y/aria-role */
+import React from 'react';
 import { useTexture } from '../hooks';
 
 type Props = {
   name: string
-  clone?: boolean
 };
 
-export const Texture: React.FC<Props> = ({ name, clone }) => {
-  const image = useTexture(name);
+export const Texture: React.FC<Props> = ({ name }) => {
+  const imageSrc = useTexture(name);
 
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const element = clone ? image.cloneNode() : image;
-
-    ref.current.appendChild(element);
-  }, []);
-
-  return <div ref={ref} data-texture-container />;
+  return <img src={imageSrc} role="texture" alt={name} />;
 };

src/hooks/use-texture.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useGame } from './use-game';
+import { HTMLTextureElement } from '../types/texture';
 
 /**
  * Get texture source image.
@@ -11,7 +12,8 @@ export function useTexture(key: string) {
 
   return useMemo(() => {
     const texture = game.textures.get(key);
+    const image = texture.getSourceImage() as HTMLTextureElement;
 
-    return texture.getSourceImage() as HTMLImageElement;
+    return URL.createObjectURL(image.originBlob);
   }, [key]);
 }

src/types/texture.ts

@@ -0,0 +1,3 @@
+export type HTMLTextureElement = HTMLImageElement & {
+  originBlob: Blob
+};