add value based custom component example

Author: KurtGokhan

Assets/Scripts/ExampleCustomComponent/CustomComponentInitializer.cs

@@ -1,6 +1,4 @@
 using ReactUnity;
-using System.Collections;
-using System.Collections.Generic;
 using UnityEngine;
 
 public class CustomComponentInitializer : MonoBehaviour

Assets/Scripts/ExampleCustomComponent/custom-component-react.js

@@ -19164,9 +19164,11 @@ var custom_component_App = /** @class */ (function (_super) {
         return _this;
     }
     App.prototype.render = function () {
+        var ElementName = 'customButton';
         return (Object(react.createElement)("view", { layout: { Height: '100%', AlignItems: 'Center', JustifyContent: 'Center' } },
             Object(react.createElement)("button", { layout: { MarginBottom: 20 }, style: { fontColor: 'white' } }, "Normal Button"),
-            Object(react.createElement)("customButton", { style: { fontColor: 'white' } }, "Custom Button")));
+            Object(react.createElement)("customButton", { layout: { MarginBottom: 20 }, style: { fontColor: 'white' } }, "Custom Button"),
+            Object(react.createElement)(ElementName, { style: { fontColor: 'white' } }, "Custom Button - Value Based")));
     };
     return App;
 }(react.Component));

react/src/custom-component/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ReactUnity, Button, NativeInstance } from 'react-unity-renderer';
 
 
+// Add strong typing for customButton component
 declare module 'React' {
   namespace JSX {
     interface IntrinsicElements {
@@ -10,24 +11,32 @@ declare module 'React' {
   }
 }
 
+
 class App extends React.Component<{}, {}> {
   onInputChange = (val: string) => {
     NamedAssets.CubeMove["Speed"] = parseFloat(val) || 0;
   };
 
   render() {
+    const ElementName: string = 'customButton';
+
     return (
-      <view
-        layout={{ Height: '100%', AlignItems: 'Center', JustifyContent: 'Center' }}>
+      <view layout={{ Height: '100%', AlignItems: 'Center', JustifyContent: 'Center' }}>
 
         <button layout={{ MarginBottom: 20 }} style={{ fontColor: 'white' }}>
           Normal Button
         </button>
 
-        <customButton style={{ fontColor: 'white' }}>
+        {/* Recommended - Strong typed */}
+        <customButton layout={{ MarginBottom: 20 }} style={{ fontColor: 'white' }}>
           Custom Button
         </customButton>
 
+        {/* Not Recommended - Not strong typed */}
+        <ElementName style={{ fontColor: 'white' }}>
+          Custom Button - Value Based
+        </ElementName>
+
       </view>
     );
   }