-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deploying to gh-pages from @ 93a8623 🚀
- Loading branch information
1 parent
78ae75a
commit 03edc8a
Showing
147 changed files
with
266 additions
and
206 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"pageProps":{"content":"[[\"$r\",\"MaxWidth\",\"8\",{\"children\":[[\"$r\",\"HomepageHero\",null,{}],\"\\n\",[\"$r\",\"h1\",null,{\"id\":\"what-is-reactunity\",\"children\":\"What is ReactUnity?\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"ReactUnity is a UI Framework for Unity, that lets you code in React and CSS. It runs this code inside a JavaScript engine and outputs Unity components to directly render them inside Unity. The goal of ReactUnity is to provide Unity developers a declarative way to build user interfaces, similar to web technologies like React and HTML.\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"Here is a sample \",[\"$r\",\"em\",null,{\"children\":\"Todo App\"}],\" to show off some React and CSS features of ReactUnity.\"]}],\"\\n\"]}],[\"$r\",\"Sandpack\",null,{\"children\":[[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-js\",\"children\":\"import { render } from '@reactunity/renderer';\\nimport { useRef, useState } from 'react';\\n\\nexport function TodoItem(props) {\\n return <view className='todo-item'>\\n <view className='todo-item-name'>\\n {props.item.text}\\n </view>\\n\\n <button className='todo-remove-button'\\n onClick={() => props.onRemove(props.item.id)}>\\n <icon>delete</icon>\\n </button>\\n </view>;\\n}\\n\\nexport function TodoPage() {\\n const lastId = useRef(3);\\n const [items, setItems] = useState([\\n { id: 0, text: 'Take a walk' },\\n { id: 1, text: 'Buy groceries' },\\n { id: 2, text: 'Prepare dinner' },\\n ]);\\n\\n const inputRef = useRef();\\n\\n function addTodo(item) {\\n inputRef.current.Value = '';\\n setItems(oldItems => {\\n const newItems = [...oldItems];\\n newItems.push({ id: lastId.current++, text: item });\\n return newItems;\\n });\\n }\\n\\n function removeTodo(id) {\\n setItems(oldItems => oldItems.filter(x => x.id !== id));\\n }\\n\\n return <scroll className='todo-root'>\\n <view className=\\\"todo-header\\\">\\n TODO app example\\n </view>\\n\\n <view className='todo-input-section'>\\n <input className='todo-input' ref={inputRef}\\n placeholder='Enter a new todo'\\n onSubmit={(ev, sender) => addTodo(sender.Value)} />\\n\\n <button className='todo-add-button'\\n onClick={() => addTodo(inputRef.current.Value)}>\\n <icon>add</icon>\\n </button>\\n </view>\\n\\n <view className=\\\"todo-items\\\">\\n {items.map((item) =>\\n <TodoItem item={item} key={item.id}\\n onRemove={removeTodo} />)}\\n </view>\\n </scroll>;\\n}\\n\\nrender(<TodoPage />);\\n\"}]}],[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-css\",\"children\":\".todo-root {\\n flex-direction: column;\\n align-self: center;\\n align-items: stretch;\\n margin: 16px;\\n padding: 32px;\\n\\n background-color: #dedede;\\n border-radius: 8px;\\n box-shadow: 1px 1px 6px -2px black;\\n}\\n\\n.todo-header {\\n color: cornflowerblue;\\n font-size: 30px;\\n font-weight: bold;\\n margin-bottom: 18px;\\n text-align: center;\\n}\\n\\n.todo-input-section {\\n flex-direction: row;\\n align-items: stretch;\\n width: 360px;\\n margin-bottom: 18px;\\n}\\n\\n.todo-input {\\n flex-shrink: 1;\\n flex-grow: 1;\\n}\\n\\n.todo-item {\\n flex-direction: row;\\n align-items: center;\\n transition: rotate var(--item-animation-duration), margin-bottom var(--item-animation-duration);\\n rotate: 0 0 0;\\n width: 360px;\\n padding: 4px 0 4px 8px;\\n margin-bottom: 0px;\\n transform-origin: top;\\n\\n background-color: white;\\n border: 1px solid #dedede;\\n border-radius: 8px;\\n\\n --item-animation-duration: 400ms;\\n}\\n\\n.todo-item:not(:first-child) {\\n margin-top: 10px;\\n}\\n\\n.todo-item:enter {\\n rotate: 90deg 0 0;\\n margin-bottom: -66px;\\n}\\n\\n.todo-item:leave {\\n rotate: 90deg 0 0;\\n margin-bottom: -66px;\\n pointer-events: none;\\n state-duration: var(--item-animation-duration);\\n}\\n\\n.todo-item-name {\\n flex-shrink: 1;\\n flex-grow: 1;\\n}\\n\\n.todo-add-button,\\n.todo-remove-button {\\n width: 50px;\\n height: 50px;\\n margin-left: 8px;\\n}\\n\"}]}]]}],[\"$r\",\"MaxWidth\",\"last\",{\"children\":[\"\\n\",[\"$r\",\"h2\",null,{\"id\":\"how-does-reactunity-work\",\"children\":\"How does ReactUnity work?\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"React library is built in a way so that the React paradigm can be used in different platforms. In fact, all platforms which can run Javascript can have a framework like ReactUnity. There are actually more \",[\"$r\",\"a\",null,{\"href\":\"https://github.com/chentsulin/awesome-react-renderer\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"Awesome React Renderers\"}],\" you probably haven’t heard of.\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"The same way you use \",[\"$r\",\"code\",null,{\"children\":\"react-dom\"}],\" for web applications, and React Native for mobile applications; you can use ReactUnity for Unity UIs.\"]}],\"\\n\",[\"$r\",\"h2\",null,{\"id\":\"how-can-i-learn-reactunity\",\"children\":\"How can I learn ReactUnity?\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"To learn ReactUnity, you need to learn React first. You can start by the \",[\"$r\",\"a\",null,{\"href\":\"https://reactjs.org/\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"official React documentation\"}],\". If you already feel confident with React, you can keep reading this documentation.\"]}]]}]]","toc":"[]","meta":{"id":"home","layout":"Home","title":"ReactUnity Docs","permalink":"index.html"}},"__N_SSG":true} |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"pageProps":{"content":"[[\"$r\",\"MaxWidth\",\"last\",{\"children\":[[\"$r\",\"p\",null,{\"children\":\"This page lists the Components supported by ReactUnity in alphabetical order.\"}],\"\\n\",[\"$r\",\"h3\",null,{\"id\":\"components-index\",\"children\":\"Components Index\"}],\"\\n\",[\"$r\",\"ul\",null,{\"children\":[\"\\n\",[\"$r\",\"li\",null,{\"children\":\"anchor\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"button\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"html\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"icon\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"image\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"input\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"prefab\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"portal\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"object\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"rawimage\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"render\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"richtext\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"script\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"scroll\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"style\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"svg\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"svgimage\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"text\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"toggle\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"video\"}],\"\\n\",[\"$r\",\"li\",null,{\"children\":\"view\"}],\"\\n\"]}]]}]]","toc":"[{\"url\":\"#\",\"text\":\"Overview\",\"depth\":2},{\"url\":\"#components-index\",\"depth\":3,\"text\":\"Components Index\"}]","meta":{"title":"Components","layout":"API"}},"__N_SSG":true} |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.