+{"pageProps":{"components":[{"id":"view.md","contentHtml":"<p><code>view</code> is the simplest container component. It can be used to encapsulate any number of children.</p>\n","title":"Simple Container Component","component":"view","order":0,"code":{"id":"components/view","jsx":"function Example() {\n return <view style={{\n padding: 20,\n backgroundColor: 'crimson',\n color: 'white',\n }}>\n Hello world\n </view>;\n};\n\nReactUnityRenderer.render(<Example />);\n"}},{"id":"scroll.md","contentHtml":"<p><code>scroll</code> is used to create a scrollable component.</p>\n","title":"Scrollable Container Component","component":"scroll","order":1,"code":{"id":"components/scroll","jsx":"function Example() {\n return <scroll style={{\n backgroundColor: 'white',\n padding: 20,\n width: 200,\n height: 120,\n }}>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet molestiae officia sit numquam! Distinctio mollitia deserunt commodi iusto quam hic, in velit perspiciatis! Quaerat pariatur non, esse quam voluptatibus incidunt.\n </scroll>;\n};\n\nReactUnityRenderer.render(<Example />);\n"}},{"id":"text.md","contentHtml":"<p><code>text</code> is used to create a component whose only content is text. It is useful for creating interpolated text and being able to style text nodes.</p>\n","title":"Text Component","component":"text","order":2,"code":{"id":"components/text","jsx":"function Example({ name }) {\n return <text style={{ color: 'yellow' }}>\n Hello {name}\n </text>;\n};\n\nReactUnityRenderer.render(\n <Example name={'John Doe'} />\n);\n"}},{"id":"button.md","contentHtml":"<p><code>button</code> can be used to create clickable components.</p>\n","title":"Button Component","component":"button","order":3,"code":{"id":"components/button","jsx":"function Example() {\n const light = Globals.Light;\n\n return <button\n style={{ margin: 20 }}\n onClick={() => light.enabled = !light.enabled}>\n Toggle Light\n </button>;\n};\n\nReactUnityRenderer.render(<Example />);\n"}},{"id":"input.md","contentHtml":"<p><code>input</code> creates a text input component.</p>\n<h3>Properties</h3>\n<dl><dt>onChange</dt><dd>An event fired when string in the input is changed by the user</dd></dl>\n","title":"Input Component","component":"input","order":3,"code":{"id":"components/input","jsx":"function Example({ defaultValue }) {\n return <input\n value={defaultValue}\n style={{ margin: 20 }}\n onChange={val => console.log(val)} />;\n};\n\nReactUnityRenderer.render(\n <Example defaultValue=\"This is default\" />\n);\n"}},{"id":"toggle.md","contentHtml":"<p><code>toggle</code> creates a boolean toggle component.</p>\n<h3>Properties</h3>\n<dl><dt>value</dt><dd>Initial value of the toggle.</dd><dt>onChange</dt><dd>Event to call when the value changes.</dd></dl>\n","title":"Toggle Component","component":"toggle","order":6,"code":{"id":"components/toggle","jsx":"function Example() {\n const light = Globals.Light;\n\n return <view style={{\n flexDirection: 'row',\n justifyContent: 'center',\n }}>\n <toggle\n onChange={val => light.enabled = val}\n value={light.enabled} />\n\n Toggle light\n </view>;\n};\n\nReactUnityRenderer.render(<Example />);\n"}},{"id":"image.md","contentHtml":"<p><code>image</code> creates an image component. Alternatively, <code>rawimage</code> creates a raw image component.</p>\n<h3>Properties</h3>\n<dl><dt>source</dt><dd>Source of the image. Can be a url or the <code>Texture2D</code> object.</dd><dt>fit</dt><dd>Determines how to position the image inside the element.</dd></dl>\n","title":"Image Component","component":"image","order":20,"code":{"id":"components/image","jsx":"const imageAddress = \"https://avatars.githubusercontent.com/u/62178684\";\n\nfunction Example() {\n return <image\n style={{ height: 200, objectFit: 'scale-down' }}\n source={imageAddress} />;\n};\n\nReactUnityRenderer.render(<Example />);\n"}}]},"__N_SSG":true}
0 commit comments