Deploying to gh-pages from @ d2d151a 🚀

Author: KurtGokhan

404.html

@@ -0,0 +1 @@
+{"pageProps":{"content":"[[\"$r\",\"MaxWidth\",\"last\",{\"children\":[[\"$r\",\"h2\",null,{\"id\":\"declaring-custom-components\",\"children\":\"Declaring custom components\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"You can declare custom components in ReactUnity. This is useful when you want to create a component that needs to interact with the underlying backend (\",[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\" or \",[\"$r\",\"code\",null,{\"children\":\"uitoolkit\"}],\").\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"To declare a custom component, you need to create a new class extending \",[\"$r\",\"code\",null,{\"children\":\"UGUIComponent\"}],\" or \",[\"$r\",\"code\",null,{\"children\":\"UIToolkitComponent\"}],\" and register it in \",[\"$r\",\"code\",null,{\"children\":\"UGUIContext.ComponentCreators\"}],\" or \",[\"$r\",\"code\",null,{\"children\":\"UIToolkitContext.ComponentCreators\"}],\" respectively.\"]}],\"\\n\",[\"$r\",\"h3\",null,{\"id\":\"example\",\"children\":\"Example\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"First we create the custom component. For instance, we are declaring a custom button component that has a red background color.\"}],\"\\n\",[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-cs\",\"children\":\"using ReactUnity.Styling;\\nusing ReactUnity.UGUI;\\nusing UnityEngine;\\n\\npublic class CustomButtonComponent : ButtonComponent\\n{\\n    public CustomButtonComponent(UGUIContext context, Color backgroundColor) : base(context)\\n    {\\n        Style[StyleProperties.backgroundColor] = backgroundColor;\\n    }\\n}\\n\"}]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"Then we need to register this component in \",[\"$r\",\"code\",null,{\"children\":\"UGUIContext.ComponentCreators\"}],\" dictionary. This can be done in a \",[\"$r\",\"code\",null,{\"children\":\"MonoBehaviour\"}],\" that is attached to the same \",[\"$r\",\"code\",null,{\"children\":\"GameObject\"}],\" as \",[\"$r\",\"code\",null,{\"children\":\"ReactRendererUGUI\"}],\" component.\\nThe declaration must be done before \",[\"$r\",\"code\",null,{\"children\":\"ReactRendererUGUI\"}],\" is enabled.\"]}],\"\\n\",[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-cs\",\"children\":\"using ReactUnity.UGUI;\\nusing UnityEngine;\\n\\npublic class CustomComponentInitializer : MonoBehaviour\\n{\\n    public ReactRendererUGUI reactUnity;\\n    public Color customButtonColor;\\n\\n    void Start()\\n    {\\n        UGUIContext.ComponentCreators[\\\"customButton\\\"] = (type, text, context) => new CustomButtonComponent(context, customButtonColor);\\n\\n        reactUnity.enabled = true;\\n    }\\n}\\n\"}]}],\"\\n\",[\"$r\",\"h3\",null,{\"id\":\"typescript-declaration\",\"children\":\"Typescript declaration\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"You may also need to declare your custom component in Typescript\"}],\"\\n\",[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-ts\",\"children\":\"declare global {\\n  interface ReactUnityCustomElements {\\n    mycomponent: { myprop?: number };\\n  }\\n}\\n\"}]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-ts\",\"children\":\"declare global {\\n  interface ReactUnityCustomElements {\\n    button: Button;\\n  }\\n}\\n\"}]}]]}]]","toc":"[{\"url\":\"#\",\"text\":\"Overview\",\"depth\":2},{\"url\":\"#declaring-custom-components\",\"depth\":2,\"text\":\"Declaring custom components\"},{\"url\":\"#example\",\"depth\":3,\"text\":\"Example\"},{\"url\":\"#typescript-declaration\",\"depth\":3,\"text\":\"Typescript declaration\"}]","meta":{"title":"Extending ReactUnity"}},"__N_SSG":true}