https://github.com/wonderlandengine/wonderland-react-ui
React-based UI using Wonderland Engine.
https://github.com/wonderlandengine/wonderland-react-ui
Last synced: 9 months ago
JSON representation
React-based UI using Wonderland Engine.
- Host: GitHub
- URL: https://github.com/wonderlandengine/wonderland-react-ui
- Owner: WonderlandEngine
- License: mit
- Created: 2024-04-18T11:01:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-05T15:54:06.000Z (about 1 year ago)
- Last Synced: 2025-09-22T09:07:23.089Z (9 months ago)
- Language: TypeScript
- Size: 13.7 MB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React-based UI in Wonderland Engine
[](https://github.com/WonderlandEngine/wonderland-react-ui/actions/workflows/npm-build.yml)
[![NPM Package][npm]](https://www.npmjs.com/package/@wonderlandengine/react-ui)
[![NPM Downloads][npm-downloads]](https://img.shields.io/npm/dw/@wonderlandengine/react-ui)
[![Discord][discord]](https://discord.wonderlandengine.com)
Performant react-based 3D UI. Write your UI code with declarative React-based Syntax and render to
[Wonderland Engine](https://wonderlandengine.com/) at the speed of light.
[Live Example](https://wonderlandengine.github.io/wonderland-react-ui)
## Setup
1. Ensure you are using Wonderland Editor 1.2+
2. Ensure your project `tsconfig.json` includes:
```json
{
"compilerOptions": {
"jsx": "react"
}
}
```
3. Ensure you have `--bundle` in "Views > Project Settings > esbuildFlagsEditor"
### Pipelines
You need three pipelines:
### UI Text
A `Text` pipeline with the following Depth settings:
### UI Color
A `Flat` pipeline with the following Depth settings:
### UI Color Textured
A copy of `UI Color`, with the `TEXTURED` feature enabled.
## Production Notes
Make sure to add `--minify` in your `esbuildFlags` when building production applications.
## State
This library is in an early development stage. It has nowhere near the widget library you would expect from
a complete component library nor API stability to ensure that future versions do not require changes to your code.
We are grateful for contributions!
## Components
The following widgets/components are currently available:
### MaterialContext.Provider
The ReactUIBase needs to know which materials/pipelines you would like to use as a base to create texts and panels.
This material will be cloned and its color updated based on the color properties of each component:
```ts
const materials: {
panelMaterial?: Material | null;
panelMaterialTextured?: Material | null;
textMaterial?: Material | null;
};
```
Pass this as context to your app code:
```jsx
{/* You app code */}
```
### Button
```jsx
console.log("Clicked!")}
hovered={{
backgroundColor: 0xff0000ff
}}
active={{
backgroundColor: 0x00ff00ff
}}
padding={20}
>
Click Me!
```
### Text
```jsx
Click Me!
```
### Panel
Panel rendered as a rectangle with rounded corners:
```jsx
{/* ... */}
```
### Column
Flex-box column:
```jsx
{/* ... */}
```
### Row
Flex-box row:
```jsx
{/* ... */}
```
### ProgressBar
```jsx
{`Health: ${health} / ${maxHealth}`}
```
### Plane
Simple plane mesh:
```jsx
```
### Image
A `Panel`, but with a `src` property to load an image from a URL and display:
```jsx
```
### Panel9Slice
A `Panel` with a 9-slice texture.
```jsx
```
[npm]: https://img.shields.io/npm/v/@wonderlandengine/react-ui
[npm-downloads]: https://img.shields.io/npm/dw/@wonderlandengine/react-ui
[discord]: https://img.shields.io/discord/669166325456699392