ReactUnity

https://reactunity.github.io
Admin
ReactUnity is a declarative UI framework for Unity that allows developers to build user interfaces...
Tokens:19,513
Snippets:216
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start development server

Source: https://reactunity.github.io/reference

Launches the Webpack Dev Server with Fast Refresh enabled.

```bash
react-unity-scripts start
```

--------------------------------

### Install Material Design Package

Source: https://reactunity.github.io/reference/material

Install the package using npm.

```bash
npm i @reactunity/material
```

--------------------------------

### Install ClearScript via OpenUPM

Source: https://reactunity.github.io/learn/howto/debug

Command to add the ClearScript package to your Unity project root.

```bash
npx openupm-cli add com.reactunity.clearscript
```

--------------------------------

### String Media Query Example

Source: https://reactunity.github.io/reference/media-queries

Compare string-typed properties against specific valid values.

```css
@media (system: windows) or (platform: iphoneplayer) {
  ...
}
```

--------------------------------

### Rendering a root component

Source: https://reactunity.github.io/reference/api/render

Example of importing the render function and mounting a component at the top level of an application.

```javascript
import { render } from '@reactunity/renderer';
  

function Hello() {
return <h1>Hello, world!</h1>;
}
  

render(<Hello />);
```

--------------------------------

### CSS Pointer Events Styles

Source: https://reactunity.github.io/reference/css/pointer-events

Example CSS configuration for layout alignment and button spacing.

```css
:root {
align-items: center;
}

.test {
flex-direction: row;
align-items: center;
}

.test > button {
margin: 20px;
}
```

--------------------------------

### Numeric Media Query Example

Source: https://reactunity.github.io/reference/media-queries

Perform numeric comparisons using min/max prefixes or standard comparison operators.

```css
@media (aspect-ratio: 1.6) and (1024 >= window-width >= 2160) {
  ...
}
```

--------------------------------

### Boolean Media Query Example

Source: https://reactunity.github.io/reference/media-queries

Use boolean properties to check for the existence of specific environment states.

```css
@media (full-screen and ugui) {
  ...
}
```

--------------------------------

### Implement a Todo App in ReactUnity

Source: https://reactunity.github.io/

A complete example demonstrating component structure, state management with hooks, and event handling for a Todo application.

```javascript
import { render } from '@reactunity/renderer';
import { useRef, useState } from 'react';

export function TodoItem(props) {
  return <view className='todo-item'>
    <view className='todo-item-name'>
      {props.item.text}
    </view>

    <button className='todo-remove-button'
      onClick={() => props.onRemove(props.item.id)}>
      <icon>delete</icon>
    </button>
  </view>;
}

export function TodoPage() {
  const lastId = useRef(3);
  const [items, setItems] = useState([
    { id: 0, text: 'Take a walk' },
    { id: 1, text: 'Buy groceries' },
    { id: 2, text: 'Prepare dinner' },
  ]);

  const inputRef = useRef();

  function addTodo(item) {
    inputRef.current.Value = '';
    setItems(oldItems => {
      const newItems = [...oldItems];
      newItems.push({ id: lastId.current++, text: item });
      return newItems;
    });
  }

  function removeTodo(id) {
    setItems(oldItems => oldItems.filter(x => x.id !== id));
  }

  return <scroll className='todo-root'>
    <view className="todo-header">
      TODO app example
    </view>

    <view className='todo-input-section'>
      <input className='todo-input' ref={inputRef}
        placeholder='Enter a new todo'
        onSubmit={(ev, sender) => addTodo(sender.Value)} />

      <button className='todo-add-button'
        onClick={() => addTodo(inputRef.current.Value)}>
        <icon>add</icon>
      </button>
    </view>

    <view className="todo-items">
      {items.map((item) =>
        <TodoItem item={item} key={item.id}
          onRemove={removeTodo} />)}
    </view>
  </scroll>;
}

render(<TodoPage />);
```

--------------------------------

### Apply z-index in CSS

Source: https://reactunity.github.io/reference/css/z-index

Example showing z-index applied to elements on hover to bring them to the front.

```css
:root {
align-items: center;
}

.items {
flex-direction: row;
align-items: center;
margin-top: 20px;
}

.item1 {
width: 100px;
height: 100px;
background-color: coral;
}

.item2 {
width: 80px;
height: 80px;
margin-left: -20px;
background-color: slategray;
}

.item1, .item2 {
transition: scale 200ms;
}

.item1:hover, .item2:hover {
cursor: pointer;
z-index: 10;
scale: 1.1;
}
```

--------------------------------

### CSS Rotate Animation Example

Source: https://reactunity.github.io/reference/css/rotate

Demonstrates various rotation units and 3D rotation syntax within a keyframe animation.

```css
.items {
flex-direction: column;
align-self: flex-start;
margin: 100px auto;
border: 1px solid gray;
}
  

.item {
width: 100px;
height: 100px;
background-color: coral;
  
animation: rotateAnim 5s infinite;
}
  

@keyframes rotateAnim {
0% {
rotate: 1;
}
  
20% {
rotate: 30deg;
}
  
40% {
rotate: 1.2rad;
}
  
60% {
rotate: 0.625turn;
}
  
80% {
rotate: 45deg 45deg 0.625turn;
}
}
```

--------------------------------

### Define CSS styles for ReactUnity elements

Source: https://reactunity.github.io/reference/css

Example of defining root styles and specific view element styles including hover states.

```css
:root {
justify-content: space-around;
text-align: center;
background-color: #a9b2ba;
}
  

view {
align-self: center;
width: 100px;
height: 100px;
background-color: coral;
cursor: pointer;
}
  

view:hover {
background-color: blue;
}
```

--------------------------------

### CSS Translate Animation Example

Source: https://reactunity.github.io/reference/css/translate

Demonstrates using the translate property within keyframes to move an element across different coordinates over time.

```css
.items {
flex-direction: column;
align-self: flex-start;
margin: 100px auto;
border: 1px solid gray;
}
  

.item {
width: 100px;
height: 100px;
background-color: coral;
  
animation: translateAnim 4s infinite;
}
  
@keyframes translateAnim {
0% {
translate: 0px 0px;
}
  
25% {
translate: 220px 40px;
}
  
50% {
translate: 200px 200px;
}
  
75% {
translate: -50px 80px;
}
  
100% {
translate: 0px 0px;
}
}
```

--------------------------------

### <svg> Component Usage

Source: https://reactunity.github.io/reference/components/svg

Example of how to use the <svg> component to render a vector graphic with specific dimensions and styling.

```APIDOC
## <svg> Component

### Description
The `<svg>` component is used to render inline SVG graphics. It requires the `Unity.VectorGraphics` package to be installed in the project.

### Usage
```jsx
<svg 
  width="48" 
  height="48" 
  viewBox="0 0 16 16" 
  xmlns="http://www.w3.org/2000/svg" 
  fill="currentColor" 
  style={{ color: 'black' }}
>
  <path d="..." />
</svg>
```
```

--------------------------------

### Render an inline SVG

Source: https://reactunity.github.io/reference/components/svg

Example of using the <svg> component to render a vector graphic with specific dimensions and styling.

```javascript
export default function App() {
  return <svg width="48" height="48" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" style={{ color: 'black' }}>
    <path d="M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09.016.016.032.016.032.032.144.112.288.224.448.336.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16.144-.111.304-.223.448-.335.016-.016.032-.016.032-.032 1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816.24-.24.528-.463.816-.639.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023.144-.32.336-.607.576-.847.24-.24.528-.431.848-.575.32-.144.672-.208 1.024-.208.368 0 .704.064 1.024.208.32.144.608.336.848.575.24.24.432.528.576.847.144.32.208.672.208 1.023 0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848 2.84 2.84 0 0 1-.848.575 2.715 2.715 0 0 1-2.064 0 2.84 2.84 0 0 1-.848-.575 2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406 4.883 4.883 0 0 0-1.088-1.135 5.207 5.207 0 0 0-1.04-.608 2.82 2.82 0 0 0 .464-.383 4.2 4.2 0 0 0 .624-.784 3.624 3.624 0 0 0 .528-1.934 3.71 3.71 0 0 0-.288-1.47 3.799 3.799 0 0 0-.816-1.199 3.845 3.845 0 0 0-1.2-.8 3.72 3.72 0 0 0-1.472-.287 3.72 3.72 0 0 0-1.472.288 3.631 3.631 0 0 0-1.2.815 3.84 3.84 0 0 0-.8 1.199 3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007.096.336.224.64.4.927.16.288.384.544.624.784.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z"/>
  </svg>
};
```

--------------------------------

### CSS visibility property usage

Source: https://reactunity.github.io/reference/css/visibility

Example showing how to use the visibility property to hide non-hovered elements within a container.

```css
:root {
align-items: center;
}
  

.items {
flex-direction: row;
align-items: center;
margin-top: 20px;
cursor: pointer;
}
  

.items > * {
width: 100px;
height: 100px;
margin: 20px;
}
  

.items:hover :not(:hover) {
visibility: hidden;
}
```

--------------------------------

### Build project for production

Source: https://reactunity.github.io/reference

Compiles the project into static files for production deployment.

```bash
react-unity-scripts build
```

--------------------------------

### Basic Toggle Implementation

Source: https://reactunity.github.io/reference/components/toggle

Demonstrates a toggle component controlling a global light state.

```javascript
export default function App() {
  const light = Globals.Light;

  return <view style={{
    flexDirection: 'row',
    justifyContent: 'center',
  }}>
    <toggle
      onChange={val => light.enabled = val}
      value={light.enabled} />

    Toggle light
  </view>;
};
```

--------------------------------

### Implementing a Video Player with Playback Controls

Source: https://reactunity.github.io/reference/components/video

Uses a ref to access the VideoPlayer instance for manual play/pause control and handles video source loading.

```javascript
import { useState, useEffect } from 'react';

export default function App() {
  const videoAddress = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

  const [videoRef, setVideoRef] = useState();

  useEffect(() => {
    if (videoRef) {
      videoRef.VideoPlayer.Play();
    }
  }, [videoRef]);

  const toggleVideo = () => {
    const vp = videoRef.VideoPlayer;
    if (vp.isPlaying) vp.Pause();
    else vp.Play();
  };

  return <>
    <video
      style={{ objectFit: 'contain', width: 500 }}
      source={videoAddress}
      ref={setVideoRef}
      onPointerClick={toggleVideo}
    />
  </>;
};
```

--------------------------------

### Applying box-shadow styles

Source: https://reactunity.github.io/reference/css/box-shadow

Demonstrates various box-shadow configurations including standard, multi-layered, inset, and blurred shadows.

```css
:root {
  padding: 10px;
}

view {
  flex-grow: 1;
  margin: 20px auto;
  background-color: white;
  width: 300px;
}

view:nth-child(1) {
  box-shadow: 1px 1px 4px 0 black;
}

view:nth-child(2) {
  box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}

view:nth-child(3) {
  border-radius: 50px;
  box-shadow: 1px 1px 4px 0 black inset;
}

view:nth-child(4) {
  box-shadow: 0 0 4px 3px black;
}
```

--------------------------------

### Implement Tooltips with useDataTooltip

Source: https://reactunity.github.io/reference/material/tooltip

Demonstrates how to register buttons with different tooltip triggers (hover, press, click) and configure positioning using data attributes.

```javascript
import { useDataTooltip, Button } from '@reactunity/material';
import '@reactunity/material/styles';

export default function App() {
  const ttHover = useDataTooltip('hover');
  const ttPress = useDataTooltip('press');
  const ttClick = useDataTooltip('click');

  return <scroll class="main">
    <view class="tooltip-triggers">

      <view>
        Hover
        <Button ref={ttHover.register} data-tooltip-offset={20} data-tooltip-position="top" data-tooltip-content="This is shown on top">Top</Button>
        <Button ref={ttHover.register} data-tooltip-position="bottom" data-tooltip-content="This is shown on bottom">Bottom</Button>
        <Button ref={ttHover.register} data-tooltip-position="left" data-tooltip-content="This is shown on left">Left</Button>
        <Button ref={ttHover.register} data-tooltip-position="right" data-tooltip-content="This is shown on right">Right</Button>
        <Button ref={ttHover.register} data-tooltip-position="center" data-tooltip-content="This is shown on center">Center</Button>
        <Button ref={ttHover.register} data-tooltip-anchor="bottom right" data-tooltip-pivot="top left" data-tooltip-content="This is shown on right bottom corner">Custom</Button>
      </view>

      <view>
        Press
        <Button ref={ttPress.register} data-tooltip-offset={20} data-tooltip-position="top" data-tooltip-content="This is shown on top">Top</Button>
        <Button ref={ttPress.register} data-tooltip-position="bottom" data-tooltip-content="This is shown on bottom">Bottom</Button>
        <Button ref={ttPress.register} data-tooltip-position="left" data-tooltip-content="This is shown on left">Left</Button>
        <Button ref={ttPress.register} data-tooltip-position="right" data-tooltip-content="This is shown on right">Right</Button>
        <Button ref={ttPress.register} data-tooltip-position="center" data-tooltip-content="This is shown on center">Center</Button>
        <Button ref={ttPress.register} data-tooltip-anchor="bottom right" data-tooltip-pivot="top left" data-tooltip-content="This is shown on right bottom corner">Custom</Button>
      </view>

      <view>
        Click
        <Button ref={ttClick.register} data-tooltip-offset={20} data-tooltip-position="top" data-tooltip-content="This is shown on top">Top</Button>
        <Button ref={ttClick.register} data-tooltip-position="bottom" data-tooltip-content="This is shown on bottom">Bottom</Button>
        <Button ref={ttClick.register} data-tooltip-position="left" data-tooltip-content="This is shown on left">Left</Button>
        <Button ref={ttClick.register} data-tooltip-position="right" data-tooltip-content="This is shown on right">Right</Button>
        <Button ref={ttClick.register} data-tooltip-position="center" data-tooltip-content="This is shown on center">Center</Button>
        <Button ref={ttClick.register} data-tooltip-anchor="bottom right" data-tooltip-pivot="top left" data-tooltip-content="This is shown on right bottom corner">Custom</Button>
      </view>
    </view>
  </scroll>;
}
```

--------------------------------

### Instantiate a Prefab in React

Source: https://reactunity.github.io/reference/components/prefab

Basic usage of the <prefab> component to render a prefab loaded from globals or resources.

```javascript
export default function App() {
// Load the prefab using globals
const { prefab } = useGlobals();
// or alternatively you can load the prefab from resources
// const prefab = useMemo(() => Interop.UnityEngine.Resources.Load('MyPrefab') as UnityEngine.GameObject, []);
  

return <prefab target={prefab} />;
};
```

--------------------------------

### Applying Opacity with CSS

Source: https://reactunity.github.io/reference/css/opacity

Demonstrates using opacity values with hover states for interactive elements.

```css
:root {
align-items: center;
}
  

.items {
flex-direction: row;
align-items: center;
}
  

.item1, .item2, .item3 {
width: 100px;
height: 100px;
transition: opacity 200ms;
cursor: pointer;
margin: 20px;
}
  

.item1:hover {
opacity: 0.4;
}
  

.item2:hover {
opacity: 80%;
}
  

.item3:hover {
opacity: 5%;
}
```

--------------------------------

### Implement Select Component in React

Source: https://reactunity.github.io/reference/material/select

Demonstrates basic usage of the Select component, including single selection, multiple selection, and chip-based multi-selection.

```javascript
import { Select } from '@reactunity/material';
import '@reactunity/material/styles';
  

export default function App() {
return <scroll class="main">
<Select placeholder={'Regular select'} initialValue="val1">
<Select.Option value="val1">Option 1</Select.Option>
<Select.Option value="val2">Option 2</Select.Option>
<Select.Option value="val3">Option 3</Select.Option>
<Select.Option value="val4">Option 4</Select.Option>
<Select.Option value="val5">Option 5</Select.Option>
<Select.Option value="val6">Option 6</Select.Option>
<Select.Option value="val7">Option 7</Select.Option>
<Select.Option value="val8">Option 8</Select.Option>
<Select.Option value="val9">Option 9</Select.Option>
<Select.Option value="val10">Option 10</Select.Option>
<Select.Option value="val11">Option 11</Select.Option>
<Select.Option value="val12">Option 12</Select.Option>
<Select.Option value="val13">Option 13</Select.Option>
</Select>
  

<Select multiple initialValue={['val1', 'val2']} placeholder={'Multiple with initial value'}>
<Select.Option value="val1">Option 1</Select.Option>
<Select.Option value="val2">Option 2</Select.Option>
<Select.Option value="val3">Option 3</Select.Option>
</Select>
  

<Select multiple chips initialValue={['val1', 'val2']} placeholder={'Chips selection'}>
<Select.Option value="val1">Option 1</Select.Option>
<Select.Option value="val2">Option 2</Select.Option>
<Select.Option value="val3">Option 3</Select.Option>
<Select.Option value="val4">Option 4</Select.Option>
<Select.Option value="val5">Option 5</Select.Option>
</Select>
</scroll>;
}
```

--------------------------------

### Toggle and ToggleGroup Usage

Source: https://reactunity.github.io/reference/material/toggle

Demonstrates basic checkbox, indeterminate state, and grouped toggle configurations.

```javascript
import { Toggle, ToggleGroup } from '@reactunity/material';
import '@reactunity/material/styles';
  

export default function App() {
return <scroll class="main">
<Toggle>Checkbox</Toggle>
<Toggle indeterminate>Indeterminate</Toggle>
  

Radio Group:
<ToggleGroup>
<Toggle>Option 1</Toggle>
<Toggle>Option 2</Toggle>
<Toggle>Option 3</Toggle>
</ToggleGroup>
  

Checkbox Group:
<ToggleGroup multiple initialValue={['val1', 'val2']} showSelectAll>
<Toggle value="val1">Option 1</Toggle>
<Toggle value="val2">Option 2</Toggle>
<Toggle value="val3">Option 3</Toggle>
</ToggleGroup>
</scroll>;
}
```

--------------------------------

### Basic RawImage implementation

Source: https://reactunity.github.io/reference/components/rawimage

Displays an image from a URL with a fixed height.

```javascript
import { useState, useEffect } from 'react';
  

export default function App() {
return (
<rawimage
style={{ height: 300 }}
source='https://picsum.photos/200' />
);
};
```

--------------------------------

### Basic Input Component Usage

Source: https://reactunity.github.io/reference/components/input

Demonstrates a standard text input with a default value, margin styling, and an onChange event handler.

```javascript
const defaultValue = 'Default value';
  

export default function App() {
return <input
value={defaultValue}
style={{ margin: 20 }}
onChange={val => console.log(val)} />;
};
```

--------------------------------

### Define static UI with XML

Source: https://reactunity.github.io/learn

Uses HTML-like syntax to define static UI structures that can be modified programmatically.

```xml
<view class="items">
  <text>Hello, Divyesh!</text>
  <text>Hello, Sarah!</text>
  <text>Hello, Taylor!</text>
</view>
```

--------------------------------

### VSCode Launch Configuration for ClearScript

Source: https://reactunity.github.io/learn/howto/debug

Configuration for launch.json to attach the VSCode debugger to the ClearScript engine on port 9222.

```json
{
  "name": "Attach to ClearScript on port 9222",
  "type": "node",
  "port": 9222,
  "request": "attach",
  "pauseForSourceMap": true,
  "resolveSourceMapLocations": null,
  "skipFiles": [
    "<node_internals>/**",
    "node_modules/**"
  ]
}
```

--------------------------------

### Import Material Design Components

Source: https://reactunity.github.io/reference/material

Import global styles once and use either individual components or the full library namespace.

```javascript
// Global styles is needed to be imported at least once for correct styling
import '@reactunity/material/styles';

// Importing a specific component:
import { Button } from '@reactunity/material';

// Importing all components together:
import * as Material from '@reactunity/material';
```

--------------------------------

### Animating Background Color in CSS

Source: https://reactunity.github.io/reference/css/background-color

Demonstrates using keyframes to transition between different background color formats over time.

```css
.test {
  width: 240px;
  height: 160px;
  margin: 40px auto;
  border: 1px solid black;
  animation: backgroundColorAnim 8s infinite;
}

@keyframes backgroundColorAnim {
  0% {
    background-color: crimson;
  }

  25% {
    background-color: #a5a5a5;
  }

  50% {
    background-color: rgba(10, 10, 235, 0.4);
  }

  75% {
    background-color: #00ff0033;
  }

  100% {
    background-color: crimson;
  }
}
```

--------------------------------

### Animating Border Width in CSS

Source: https://reactunity.github.io/reference/css/border-width

Demonstrates how to animate the border-width property and individual side widths using keyframes.

```css
.test {
width: 240px;
height: 160px;
margin: 40px auto;
background-color: coral;
animation: borderWidthAnim 4s infinite;
}
  

@keyframes borderWidthAnim {
0% {
border-width: 20px;
}
  

25% {
border-width: 20px;
border-bottom-width: 0;
}
  

50% {
border-width: 20px 60px 0 20px;
border-radius: 0;
}
  

75% {
border-width: 10px;
border-bottom-width: 40px;
border-radius: 40px;
}
  

100% {
border-width: 20px;
border-radius: 0;
}
}
```

--------------------------------

### Randomize background color using Interop

Source: https://reactunity.github.io/learn/howto/interop

Demonstrates calling the Unity Color constructor directly from JavaScript using the Interop namespace.

```javascript
export default function App() {
  const ref = React.useRef();
  const randomize = () => {
    const r = Math.random();
    const g = Math.random();
    const b = Math.random();
    const color = new Interop.UnityEngine.Color(r, g, b);
    ref.current.Style.backgroundColor = color;
  };

  return <>
    <button onClick={randomize} ref={ref}>
      Randomize color
    </button>
  </>;
}
```

--------------------------------

### Basic view component usage

Source: https://reactunity.github.io/reference/components/view

Defines a container with custom padding, background color, and text content.

```javascript
export default function App() {
return <view style={{
padding: 20,
backgroundColor: 'crimson',
color: 'white',
}}>
Hello world
</view>;
};
```

--------------------------------

### Basic Anchor Component Usage

Source: https://reactunity.github.io/reference/components/anchor

Displays an anchor component that navigates to a GitHub URL with custom margin styling.

```javascript
export default function App() {
return <anchor url="https://github.com/ReactUnity"
style={{ margin: 20 }}>
Go to GitHub
</anchor>;
};
```

--------------------------------

### Implement Dialog Components in React

Source: https://reactunity.github.io/reference/material/dialogs

Demonstrates the usage of AlertDialog, ConfirmDialog, and PromptDialog components with state-based visibility toggling.

```javascript
import { Button, AlertDialog, ConfirmDialog, PromptDialog } from '@reactunity/material';
import '@reactunity/material/styles';
  

export default function App() {
const [dlOpen, setDlOpen] = React.useState(0);
  

return <scroll class="main">
<view>
<Button onClick={() => setDlOpen(1)}>Open Alert With Text Only</Button>
<Button onClick={() => setDlOpen(2)}>Open Alert With Title Only</Button>
<Button onClick={() => setDlOpen(3)}>Open Alert With Text & Title</Button>
  

<AlertDialog open={dlOpen === 1} onClose={() => setDlOpen(0)} backdropClose text={'Some alert text'} />
<AlertDialog open={dlOpen === 2} onClose={() => setDlOpen(0)} backdropClose title={'Some alert title'} />
<AlertDialog open={dlOpen === 3} onClose={() => setDlOpen(0)} backdropClose text={'Some alert text'} title={'Some alert title'} />
</view>
  

<view>
<Button onClick={() => setDlOpen(4)}>Open Confirm With Text Only</Button>
<Button onClick={() => setDlOpen(5)}>Open Confirm With Title Only</Button>
<Button onClick={() => setDlOpen(6)}>Open Confirm With Text & Title</Button>
  

<ConfirmDialog open={dlOpen === 4} onClose={() => setDlOpen(0)} backdropClose text={'Some confirm text'} />
<ConfirmDialog open={dlOpen === 5} onClose={() => setDlOpen(0)} backdropClose title={'Some confirm title'} />
<ConfirmDialog open={dlOpen === 6} onClose={() => setDlOpen(0)} backdropClose text={'Some confirm text'} title={'Some confirm title'} />
</view>
  

<view>
<Button onClick={() => setDlOpen(7)}>Open Prompt With Text Only</Button>
<Button onClick={() => setDlOpen(8)}>Open Prompt With Title Only</Button>
<Button onClick={() => setDlOpen(9)}>Open Prompt With Text & Title</Button>
  

<PromptDialog open={dlOpen === 7} onClose={() => setDlOpen(0)} backdropClose text={'Some prompt text'} />
<PromptDialog open={dlOpen === 8} onClose={() => setDlOpen(0)} backdropClose title={'Some prompt title'} />
<PromptDialog placeholder="Some placeholder" open={dlOpen === 9} onClose={() => setDlOpen(0)} backdropClose text={'Some prompt text'} title={'Some prompt title'} />
</view>
```

--------------------------------

### Render a React component

Source: https://reactunity.github.io/reference

Initializes the ReactUnity renderer to display UI elements.

```javascript
import { render } from '@reactunity/renderer';

render(<view>Hello world!</view>)
```

--------------------------------

### Basic Image Component Usage

Source: https://reactunity.github.io/reference/components/image

Displays an image from a URL with specific height and object-fit styling.

```javascript
export default function App() {
const imageAddress = 'https://picsum.photos/200';
return <image
style={{ height: 300, objectFit: 'contain' }}
source={imageAddress} />;
};
```

--------------------------------

### Create a custom UGUI component

Source: https://reactunity.github.io/learn/howto/extending

Define a custom component class by extending UGUIComponent or its derivatives like ButtonComponent.

```csharp
using ReactUnity.Styling;
using ReactUnity.UGUI;
using UnityEngine;

public class CustomButtonComponent : ButtonComponent
{
    public CustomButtonComponent(UGUIContext context, Color backgroundColor) : base(context)
    {
        Style[StyleProperties.backgroundColor] = backgroundColor;
    }
}
```

--------------------------------

### Configure link.xml for code stripping

Source: https://reactunity.github.io/learn/howto/troubleshooting

Use a link.xml file to prevent Unity from stripping engine modules or assemblies required by ReactUnity.

```xml
<linker>
  <assembly fullname="UnityEngine.VideoModule">
    <type fullname="UnityEngine.Video.VideoPlayer" preserve="all"/>
  </assembly>

  <assembly fullname="Assembly-CSharp"/>

  <assembly fullname="ReactUnity"/>
</linker>
```

--------------------------------

### Implement Card with Elevation

Source: https://reactunity.github.io/reference/material/card

Displays multiple Card components with varying elevation levels to demonstrate depth.

```javascript
import { Card } from '@reactunity/material';
import '@reactunity/material/styles';
  

export default function App() {
return <scroll class="main">
<Card elevation={1}>
<Card.Content>
Card with elevation 1
</Card.Content>
</Card>
  

<Card elevation={3}>
<Card.Content>
Card with elevation 3
</Card.Content>
</Card>
  

<Card elevation={8}>
<Card.Content>
Card with elevation 8
</Card.Content>
</Card>
</scroll>;
}
```

--------------------------------

### <image>

Source: https://reactunity.github.io/reference/components/image

The <image> component renders an image from a specified source. It supports various source types and CSS-based tinting.

```APIDOC
## <image>

### Description
Displays an image component. Alternatively, use <rawimage> for raw images or <svgimage> for SVG files (requires Unity.VectorGraphics package).

### Properties
- **source** (string|Texture2D|Sprite) - Required - The source of the image. Can be a URL, a resource path (e.g., 'res:path/to/file'), a Texture2D object, or a Sprite object.

### Notes
- The CSS `color` property can be used to tint the image.

### Example
```jsx
<image
  style={{ height: 300, objectFit: 'contain' }}
  source="https://picsum.photos/200"
/>
```
```

--------------------------------

### Rich-Text Configuration

Source: https://reactunity.github.io/reference/components/text

Demonstrates enabling and disabling rich-text formatting within the <text> component.

```javascript
const name = 'John Doe';

export default function App() {
  return <>
    <text style={{ marginBottom: 20 }}>
      {`Yes! This is <#998855>rich-text</color> with color`}
    </text>

    <text richText={false}>
      {`Sorry, no <b>rich-text</b> here`}
    </text>
  </>;
};
```

--------------------------------

### Animating Border Radius in CSS

Source: https://reactunity.github.io/reference/css/border-radius

Demonstrates using keyframes to animate the border-radius property and individual corner radii over time.

```css
.test {
width: 240px;
height: 160px;
margin: 40px auto;
background-color: cornflowerblue;
animation: borderRadiusAnim 6s infinite;
}
  

@keyframes borderRadiusAnim {
0% {
border-radius: 20%;
}
  

25% {
border-radius: 50%;
}
  

50% {
border-radius: 50%;
border-top-left-radius: 20%;
border-bottom-right-radius: 20%;
}
  

75% {
border-radius: 20%;
border-bottom-left-radius: 0;
}
  

100% {
border-radius: 20%;
}
}
```

--------------------------------

### Basic Accordion Implementation

Source: https://reactunity.github.io/reference/material/accordion

A standard implementation of the Accordion component using the @reactunity/material library.

```javascript
import { Accordion } from '@reactunity/material';
import '@reactunity/material/styles';
  

export default function App() {
return <scroll class="main">
<Accordion>
<Accordion.Summary>
<view>This is the accordion summary</view>
</Accordion.Summary>
  

<Accordion.Content>
Accordion content
</Accordion.Content>
</Accordion>
</scroll>;
}
```

--------------------------------

### Load HTML content from a URL

Source: https://reactunity.github.io/reference/components/html

Use the source property to fetch and render HTML content from a remote URL.

```javascript
const url = 'https://reactunity.github.io/examples/html-content.html';

export default function App() {
  return <html source={url} />;
};
```

--------------------------------

### Slider Component Implementation

Source: https://reactunity.github.io/reference/material/slider

Demonstrates various Slider configurations including horizontal and vertical orientations, normal and diff modes, and step increments.

```javascript
import { Slider } from '@reactunity/material';
import '@reactunity/material/styles';

export default function App() {
  return <scroll class="main">
    <Slider allowScroll direction="horizontal" mode="normal" max={100} />
    <Slider allowScroll direction="horizontal" mode="diff" max={100} />
    <Slider allowScroll direction="horizontal-reverse" mode="normal" max={100} />
    <Slider allowScroll direction="horizontal-reverse" mode="diff" max={100} />

    <view style={{ flexDirection: 'row' }}>
      <Slider allowScroll direction="vertical" mode="normal" max={100} step={20} />
      <Slider allowScroll direction="vertical" mode="diff" max={100} step={20} />
      <Slider allowScroll direction="vertical-reverse" mode="normal" max={100} step={20} />
      <Slider allowScroll direction="vertical-reverse" mode="diff" max={100} step={20} />
    </view>
  </scroll>;
}
```

--------------------------------

### Applying content to elements and pseudo-elements

Source: https://reactunity.github.io/reference/css/content

Demonstrates using the content property within CSS classes and pseudo-element selectors.

```css
.test {
  border: 1px solid black;
  padding: 12px;
  flex-direction: row;
}

.test:hover text {
  content: "Inside content!";
}

.test:before {
  content: "Before content!";
  margin-right: 10px;
}

.test:after {
  content: "After content!";
  margin-left: 10px;
}
```

--------------------------------

### Pass Custom Properties and Events to a Prefab

Source: https://reactunity.github.io/reference/components/prefab

Configure the <prefab> component with custom properties and event listeners to interact with the target component.

```javascript
export default function App() {
  const prefab = useMemo(() => Interop.UnityEngine.Resources.Load('MyPrefab') as UnityEngine.GameObject, []);

  return (
    <prefab
      target={prefab}
      custom={{
        // This will be passed to the prefab target component
        myprop: 'something'
      }}
      // This will be invoked when `FireEvent` is called from the prefab target component
      onSomething={val => console.log('Something happened', val)}
    />
  );
};
```

--------------------------------

### Applying appearance property in React

Source: https://reactunity.github.io/reference/css/appearance

Demonstrates applying the appearance property directly to button elements using inline styles.

```javascript
export default function App() {
return <>
Click the buttons to see style differences
  

<view className="test">
<button style={{ appearance: 'button' }}>
Appearance: button
</button>
  

<button style={{ appearance: 'none' }}>
Appearance: none
</button>
</view>
</>;
}
```

--------------------------------

### Applying Scale in CSS Keyframes

Source: https://reactunity.github.io/reference/css/scale

Demonstrates using the scale property within a keyframe animation to transition between uniform and non-uniform scaling states.

```css
.items {
flex-direction: column;
align-self: flex-start;
margin: 100px auto;
border: 1px solid gray;
}
  

.item {
width: 100px;
height: 100px;
background-color: coral;
  
animation: scaleAnim 4s infinite;
}
  
@keyframes scaleAnim {
0% {
scale: 1;
}
  
25% {
scale: 2.2;
}
  
50% {
scale: 3.4 1;
}
  
75% {
scale: 0.5;
}
  
100% {
scale: 1;
}
}
```

--------------------------------

### Apply CSS color property

Source: https://reactunity.github.io/reference/css/color

Demonstrates applying different color formats including named colors, hex codes, and rgba values to elements.

```css
view {
  flex-grow: 1;
  justify-content: center;
  font-size: 48px;
}

view:nth-child(1) {
  color: crimson;
}

view:nth-child(2) {
  color: #a5a5a5;
}

view:nth-child(3) {
  color: rgba(10, 10, 235, 0.7);
}

view:nth-child(4) {
  color: #550055aa;
}
```

--------------------------------

### Animating Border Colors in CSS

Source: https://reactunity.github.io/reference/css/border-color

Demonstrates using border-color and specific side-color properties within a keyframe animation to change border appearance over time.

```css
.test {
  width: 240px;
  height: 160px;
  margin: 40px auto;
  background-color: cornflowerblue;
  border-width: 30px;
  animation: borderColorAnim 8s infinite;
}

@keyframes borderColorAnim {
  0% {
    border-color: black;
  }

  25% {
    border-color: transparent;
    border-bottom-color: #ff7edb;
  }

  50% {
    border-color: black;
    border-right-color: rgba(130, 85, 255, 0.363);
    border-bottom-color: hsla(46, 100%, 50%, 0.8);
    border-radius: 0;
  }

  75% {
    border-color: gold;
    border-bottom-color: red;
    border-radius: 60px;
  }

  100% {
    border-color: black;
    border-radius: 0;
  }
}
```

--------------------------------

### Load script content from a URL

Source: https://reactunity.github.io/reference/components/script

Uses the source property to fetch and execute JavaScript from an external URL.

```javascript
const url = 'https://reactunity.github.io/examples/script-content.js';

export default function App() {
  return <>
    <view id="style-this">
      Styled text
    </view>

    <script source={url} />
  </>;
};
```

--------------------------------

### <prefab> Component

Source: https://reactunity.github.io/reference/components/prefab

The <prefab> component instantiates a target prefab and allows passing custom properties and event handlers.

```APIDOC
## <prefab>

### Description
Instantiates a custom prefab as a React component. It supports passing custom properties and event listeners to the prefab instance.

### Props
- **target** (UnityEngine.GameObject) - Required - The prefab object to instantiate.
- **custom** (Object) - Optional - An object containing properties to be passed to the prefab target component via `SetProperty`.
- **on[EventName]** (Function) - Optional - Event handlers invoked when `FireEvent` is called from the prefab target component.
```

--------------------------------

### <input> Component

Source: https://reactunity.github.io/reference/components/input

The <input> component is used to capture text input from the user. It supports setting an initial value and listening for changes via the onChange event.

```APIDOC
## <input> Component

### Description
Creates a text input component for user interaction.

### Properties
- **onChange** (function) - An event fired when the string in the input is changed by the user.
- **value** (string) - The initial value displayed in the input field.

### Usage Example
```jsx
<input
  value="Default value"
  onChange={val => console.log(val)} 
/>
```
```

--------------------------------

### Basic render usage

Source: https://reactunity.github.io/reference/api/render

Renders a JSX element into the renderer.

```javascript
render(<App />);
```

--------------------------------

### Configure tsconfig.json for UI Backend

Source: https://reactunity.github.io/learn/ui-backends

Required configuration in tsconfig.json to enable correct component types for the chosen UI backend.

```json
"jsxImportSource": "@reactunity/renderer/ugui"
"types": [
    "@reactunity/scripts/main"
]
```

--------------------------------

### <video> Component

Source: https://reactunity.github.io/reference/components/video

The <video> component renders a video player. It accepts a source property and provides a reference to the VideoPlayer instance for programmatic control.

```APIDOC
## <video> Component

### Description
The `<video>` component is used to embed and control video playback within the application.

### Properties
- **source** (string/Video object) - Required - The source of the video, which can be a URL or a Video object.
- **ref** (function) - Optional - A callback to receive the component reference, which provides access to the `VideoPlayer` object.

### VideoPlayer Methods
- **Play()** - Starts video playback.
- **Pause()** - Pauses video playback.

### VideoPlayer Properties
- **isPlaying** (boolean) - Indicates whether the video is currently playing.
```

--------------------------------

### <anchor>

Source: https://reactunity.github.io/reference/components/anchor

The <anchor> component renders a button that opens the provided URL upon being clicked.

```APIDOC
## <anchor>

### Description
A special button component that opens the given link when clicked.

### Props
- **url** (string) - Required - The destination URL to open when the anchor is clicked.
- **style** (object) - Optional - CSS styles to apply to the anchor component.

### Usage Example
```jsx
<anchor url="https://github.com/ReactUnity" style={{ margin: 20 }}>
  Go to GitHub
</anchor>
```
```

--------------------------------

### <html> Component Properties

Source: https://reactunity.github.io/reference/components/html

The <html> component accepts either a content string or a source URL to render UI elements.

```APIDOC
## <html> Component

### Description
Renders html-like content. Supports <style> and <script> tags. Event properties and styles can be passed as strings.

### Properties
- **content** (string) - Optional - An html-like string to be rendered.
- **source** (string) - Optional - A URL from which to load the html-like content.

### Example: Rendering content string
```jsx
const htmlContent = `
<view>
  <button onClick="console.log('hello there')"
    style="background-color: green; color: white;">
    Action button
  </button>
</view>
`;

export default function App() {
  return <html content={htmlContent} />;
};
```

### Example: Loading from URL
```jsx
const url = 'https://reactunity.github.io/examples/html-content.html';

export default function App() {
  return <html source={url} />;
};
```
```

--------------------------------

### Basic Text Interpolation

Source: https://reactunity.github.io/reference/components/text

Displays how to use the <text> component to render interpolated variables with custom styles.

```javascript
const name = 'John Doe';
  

export default function App() {
return <text style={{ color: 'green' }}>
Hello {name}
</text>;
};
```

--------------------------------

### Implement Material Buttons in React

Source: https://reactunity.github.io/reference/material/button

Demonstrates the usage of different Button variants including filled, outlined, text, and icon styles within a scrollable container.

```javascript
import { Button } from '@reactunity/material';
import '@reactunity/material/styles';
  

export default function App() {
return <scroll class="main">
<Button variant="filled" elevation={4}>
Filled Button
</Button>
  

<Button variant="outlined">
Outlined Button
</Button>
  

<Button variant="text">
Text Button
</Button>
  

<Button variant="icon">
<icon>person</icon>
</Button>
</scroll>;
}
```

--------------------------------

### Applying cursor styles in React components

Source: https://reactunity.github.io/reference/css/cursor

Demonstrates applying various cursor types including named values and custom image URLs with hotspot coordinates using inline styles.

```javascript
export default function App() {
  return <>
    Hover the boxes to see cursor

    <view className="items">
      <view style={{ cursor: 'pointer' }} />
      <view style={{ cursor: 'none' }} />
      <view style={{ cursor: 'move' }} />
      <view style={{ cursor: 'url(res:ReactUnity/sprites/check) 5 5' }} />
    </view>
  </>;
}
```

--------------------------------

### Implement FixedSizeList for Virtual Scrolling

Source: https://reactunity.github.io/reference/material/virtual-scroll

Uses the FixedSizeList component to render a large list of items with a constant height. Requires importing the component and its associated styles.

```javascript
import { FixedSizeList } from '@reactunity/material';
import '@reactunity/material/styles';
  

const Row = (props) =>
<text style={props.style}>Row {props.index}</text>;
  

const FixedSizeExample = () => (
<FixedSizeList
height={450}
itemCount={10000}
itemSize={30}
width={300}
smoothness={0}
>
{Row}
</FixedSizeList>
);
  

export default function App() {
return <FixedSizeExample />;
}
```
Tokens:
Raw