{"id":27765200,"url":"https://github.com/WonderlandEngine/wonderland-react-ui","last_synced_at":"2025-04-29T16:02:29.155Z","repository":{"id":234443759,"uuid":"788406342","full_name":"WonderlandEngine/wonderland-react-ui","owner":"WonderlandEngine","description":"React-based UI using Wonderland Engine.","archived":false,"fork":false,"pushed_at":"2024-11-30T13:27:41.000Z","size":14514,"stargazers_count":7,"open_issues_count":9,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T11:08:16.237Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WonderlandEngine.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-18T11:01:48.000Z","updated_at":"2025-03-04T18:22:26.000Z","dependencies_parsed_at":"2024-06-24T10:04:40.769Z","dependency_job_id":"2812b0f1-19fe-40c4-8c23-3e7e1f9c8046","html_url":"https://github.com/WonderlandEngine/wonderland-react-ui","commit_stats":null,"previous_names":["squareys/wonderland-react-ui","wonderlandengine/wonderland-react-ui"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WonderlandEngine%2Fwonderland-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WonderlandEngine%2Fwonderland-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WonderlandEngine%2Fwonderland-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WonderlandEngine%2Fwonderland-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WonderlandEngine","download_url":"https://codeload.github.com/WonderlandEngine/wonderland-react-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251536269,"owners_count":21605195,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-29T16:01:14.290Z","updated_at":"2025-04-29T16:02:29.109Z","avatar_url":"https://github.com/WonderlandEngine.png","language":"TypeScript","funding_links":[],"categories":["UI Libraries"],"sub_categories":[],"readme":"# React-based UI in Wonderland Engine\n\n[![Build \u0026 Test](https://github.com/WonderlandEngine/wonderland-react-ui/actions/workflows/npm-build.yml/badge.svg)](https://github.com/WonderlandEngine/wonderland-react-ui/actions/workflows/npm-build.yml)\n[![NPM Package][npm]](https://www.npmjs.com/package/@wonderlandengine/react-ui)\n[![NPM Downloads][npm-downloads]](https://img.shields.io/npm/dw/@wonderlandengine/react-ui)\n[![Discord][discord]](https://discord.wonderlandengine.com)\n\nPerformant react-based 3D UI. Write your UI code with declarative React-based Syntax and render to\n[Wonderland Engine](https://wonderlandengine.com/) at the speed of light.\n\n[Live Example](https://wonderlandengine.github.io/wonderland-react-ui)\n\n![demo-gif](https://github.com/WonderlandEngine/wonderland-react-ui/blob/main/images/react-ui-image-small.gif)\n\n## Setup\n\n1. Ensure you are using Wonderland Editor 1.2+\n\n2. Ensure your project `tsconfig.json` includes:\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\"\n  }\n}\n```\n3. Ensure you have `--bundle` in \"Views \u003e Project Settings \u003e esbuildFlagsEditor\"\n\n### Pipelines\n\nYou need three pipelines:\n\n### UI Text\n\nA `Text` pipeline with the following Depth settings:\n\n![pipeline-settings-text](https://github.com/WonderlandEngine/wonderland-react-ui/blob/main/images/pipeline-settings-text.png)\n\n### UI Color\n\nA `Flat` pipeline with the following Depth settings:\n\n![pipeline-settings](https://github.com/WonderlandEngine/wonderland-react-ui/blob/main/images/pipeline-settings.png)\n\n### UI Color Textured\n\nA copy of `UI Color`, with the `TEXTURED` feature enabled.\n\n\n## Production Notes\n\nMake sure to add `--minify` in your `esbuildFlags` when building production applications.\n\n## State\n\nThis library is in an early development stage. It has nowhere near the widget library you would expect from\na complete component library nor API stability to ensure that future versions do not require changes to your code.\n\nWe are grateful for contributions!\n\n## Components\n\nThe following widgets/components are currently available:\n\n### MaterialContext.Provider\n\nThe ReactUIBase needs to know which materials/pipelines you would like to use as a base to create texts and panels.\nThis material will be cloned and its color updated based on the color properties of each component:\n\n```ts\nconst materials: {\n    panelMaterial?: Material | null;\n    panelMaterialTextured?: Material | null;\n    textMaterial?: Material | null;\n};\n```\n\nPass this as context to your app code:\n\n```jsx\n\u003cMaterialContext.Provider value={materials}\u003e\n    {/* You app code */}\n\u003c/MaterialContext.Provider\u003e\n```\n\n### Button\n\n```jsx\n\u003cButton\n    onClick={() =\u003e console.log(\"Clicked!\")}\n    hovered={{\n        backgroundColor: 0xff0000ff\n    }}\n    active={{\n        backgroundColor: 0x00ff00ff\n    }}\n    padding={20}\n\u003e\n    \u003cText\u003eClick Me!\u003c/Text\u003e\n\u003c/Button\u003e\n```\n\n### Text\n\n```jsx\n\u003cText fontSize={20}\u003eClick Me!\u003c/Text\u003e\n```\n\n### Panel\n\nPanel rendered as a rectangle with rounded corners:\n\n```jsx\n\u003cPanel\n    backgroundColor={0xff00ffff}\n    rounding={10}\n    resolution={8}\n    width=\"80%\"\n    height=\"100%\"\n\u003e\n    {/* ... */}\n\u003c/Panel\u003e\n```\n\n### Column\n\nFlex-box column:\n\n```jsx\n\u003cColumn rowGap={10}\u003e\n    {/* ... */}\n\u003c/Column\u003e\n```\n\n### Row\n\nFlex-box row:\n\n```jsx\n\u003cRow columnGap={10}\u003e\n    {/* ... */}\n\u003c/Row\u003e\n```\n\n### ProgressBar\n\n```jsx\n\u003cProgressBar value={health/maxHealth}\u003e\n    \u003cText\u003e{`Health: ${health} / ${maxHealth}`}\u003c/Text\u003e\n\u003c/ProgressBar\u003e\n```\n\n### Plane\n\nSimple plane mesh:\n\n```jsx\n\u003cPlane width={100} height={100} material={coinIconTextureMat} mesh={planeMesh} /\u003e\n```\n\n### Image\n\nA `Panel`, but with a `src` property to load an image from a URL and display:\n\n```jsx\n\u003cImage width={100} height={100} src=\"grumpy-cat.jpg\" /\u003e\n```\n\n### Panel9Slice\n\nA `Panel` with a 9-slice texture.\n\n```jsx\n\u003cPanel9Slice width={100} height={100} texture={someNineSliceTexture} /\u003e\n```\n\n\n[npm]: https://img.shields.io/npm/v/@wonderlandengine/react-ui\n[npm-downloads]: https://img.shields.io/npm/dw/@wonderlandengine/react-ui\n[discord]: https://img.shields.io/discord/669166325456699392\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWonderlandEngine%2Fwonderland-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWonderlandEngine%2Fwonderland-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWonderlandEngine%2Fwonderland-react-ui/lists"}