Merge pull request #161 from elraccoone/improvements/refactor-width-height-to-style

Improvements/refactor width height to style

Author: jeffreylanters

README.md

@@ -56,7 +56,7 @@ Welcome to the React Unity WebGL Documentation! My name is Jeffrey and I'm here
 - [Tracking the loading progression](#tracking-the-loading-progression)
 - [Handeling on when the Application is loaded](#handeling-on-when-the-application-is-loaded)
 - [Entering or Leaving Fullscreen](#entering-or-leaving-fullscreen)
-- [Setting the Canvas's Height and Width](#setting-the-canvass-height-and-width)
+- [Adding Styles to the Canvas Component](#adding-styles-to-the-canvas-component)
 - [Setting the Canvas's ClassName](#setting-the-canvass-classname)
 - [Device Pixel Ratio and Retina Support](#device-pixel-ratio-and-retina-support)
 - [Tab Index and Keyboard Capturing](#tab-index-and-keyboard-capturing)
@@ -397,16 +397,16 @@ const App = () => {
 };
 ```
 
-## Setting the Canvas's Height and Width
+## Adding Styles to the Canvas Component
 
-> Available since version 5.6.0
+> Available since version 8.2.0
 
-The default size is 800px width to 600px height. You can easily overrule them by passing the following props. The height and width properties are used to set the height and width of the wrapper element.
+The style tag allows for adding inline CSS for styling the component. The style's properties will be assigned directly onto the actual canvas.
 
-The height and width can be set to auto (Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent of the containing block. Note that the height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!
+The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit.
 
 ```tsx
-<Unity height={number | string} width={number | string} />
+<Unity style={CSSProperties} />
 ```
 
 #### Example implementation
@@ -427,7 +427,17 @@ const unityContext = new UnityContext({
 });
 
 const App = () => {
-  return <Unity unityContext={unityContext} width="100%" height="950px" />;
+  return (
+    <Unity
+      unityContext={unityContext}
+      style={{
+        height: "100%",
+        width: 950,
+        border: "2px solid black",
+        background: "grey",
+      }}
+    />
+  );
 };
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-unity-webgl",
-  "version": "8.1.7",
+  "version": "8.2.0",
   "description": "React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application, with two-way communication between your React and Unity application with advanced API's.",
   "keywords": [
     "React",

source/components/unity.ts

@@ -86,13 +86,10 @@ export default class Unity extends PureComponent<IUnityProps, {}> {
    */
   public render(): React.ReactNode {
     return createElement("canvas", {
+      ref: (ref: HTMLCanvasElement) => (this.htmlCanvasElementReference = ref),
       className: this.props.className || "",
-      tabIndex: this.props.tabIndex,
-      ref: (r: HTMLCanvasElement) => (this.htmlCanvasElementReference = r),
-      style: {
-        width: this.props.width || "800px",
-        height: this.props.height || "600px",
-      },
+      tabIndex: this.props.tabIndex || undefined,
+      style: this.props.style || {},
     });
   }
 }

source/interfaces/unity-props.ts

@@ -1,29 +1,24 @@
+import { CSSProperties } from "react";
 import UnityContext from "../models/unity-context";
 
 export default interface IUnityProps {
   /**
-   * The context that should be rendered within the Unity component.
+   * The Context which should be rendered be the Unity Component.
    * @type {UnityContext}
    */
   unityContext: UnityContext;
 
   /**
-   * The class name for the canvas wrapper.
+   * The Class Name will be applied to the Canvas.
    * @type {string}
    */
   className?: string;
 
   /**
-   * The width of the element.
-   * @type {string | number}
+   * The styles will be applied to the Canvas.
+   * @type {CSSProperties}
    */
-  width?: string | number;
-
-  /**
-   * The height of the element.
-   * @type {string | number}
-   */
-  height?: string | number;
+  style?: CSSProperties;
 
   /**
    * The tabIndex of the element. Mitigates the issue that once WebGL is loaded,