{"id":15634884,"url":"https://github.com/oyyd/react-yue","last_synced_at":"2025-04-15T10:51:52.238Z","repository":{"id":40003260,"uuid":"115721429","full_name":"oyyd/react-yue","owner":"oyyd","description":"Render the views of Yue with React.","archived":false,"fork":false,"pushed_at":"2018-07-20T08:52:49.000Z","size":159,"stargazers_count":131,"open_issues_count":8,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T19:13:12.869Z","etag":null,"topics":["gui","react","react-reconciler","webkit","yue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oyyd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-29T12:39:21.000Z","updated_at":"2025-03-15T06:00:42.000Z","dependencies_parsed_at":"2022-06-26T02:59:14.154Z","dependency_job_id":null,"html_url":"https://github.com/oyyd/react-yue","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyyd%2Freact-yue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyyd%2Freact-yue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyyd%2Freact-yue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyyd%2Freact-yue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oyyd","download_url":"https://codeload.github.com/oyyd/react-yue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249057647,"owners_count":21205905,"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":["gui","react","react-reconciler","webkit","yue"],"created_at":"2024-10-03T10:58:41.126Z","updated_at":"2025-04-15T10:51:52.213Z","avatar_url":"https://github.com/oyyd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-yue\n\n[![npm-version](https://img.shields.io/npm/v/react-yue.svg?style=flat-square)](https://www.npmjs.com/package/react-yue)\n[![build-badge](https://ci.appveyor.com/api/projects/status/qse4t1mtex8ccsep?svg=true)](https://ci.appveyor.com/api/projects/status/qse4t1mtex8ccsep/branch/master?svg=true\n)\n\n\nThis is a lib to help you render the [View](http://libyue.com/docs/latest/js/api/view.html) of [Yue](https://github.com/yue/yue/) in the react way.\n\nMoreover, it's possible to utilize react-yue to a hot reload developing experience.\n\nYou may want to check [do-space-client](https://github.com/oyyd/do-space-client) and\n[react-yue-app](https://github.com/viewstools/react-yue-app) as examples of using this lib.\n\n|mac|\n|---|\n|\u003cimg src=\"https://raw.githubusercontent.com/oyyd/do-space-client/static/site/screenshot.png\" width=\"400px\"/\u003e|\n\n## Get Started\n\n**Use node v8 or v9 as they are supported by the builds of gui.**\n\n```\nnpm i react-yue react gui\n```\n\nRender your view into a container:\n\n```js\nimport React from 'react'\nimport gui from 'gui'\nimport { render } from 'react-yue'\n\n// Create your react component:\nfunction App() {\n  return (\n    \u003ccontainer\n      style={{\n        flexDirection: 'row',\n        flex: 1,\n        justifyContent: 'center',\n      }}\n    \u003e\n      \u003clabel\n        text=\"hello\"\n      /\u003e\n    \u003c/container\u003e\n  )\n}\n\n// Create a window and a root container:\nconst win = gui.Window.create({})\nwin.setContentSize({ width: 400, height: 250 })\n\nconst contentView = gui.Container.create()\ncontentView.setStyle({ flexDirection: 'row' })\nwin.setContentView(contentView)\nwin.center()\nwin.activate()\n\n// Create your react elements and render them:\nrender(\u003cApp /\u003e, contentView)\n\n// Start your app\nif (!process.versions.yode) {\n  gui.MessageLoop.run()\n  process.exit(0)\n}\n```\n\nCheck this **ES5** example if you want to run it without any code transforming:\n\n```js\nconst React = require('react')\nconst gui = require('gui')\nconst { render } = require('react-yue')\n\n// Create your react component:\nfunction App() {\n  return React.createElement('container', {\n    style: {\n      flexDirection: 'row',\n      flex: 1,\n      justifyContent: 'center',\n    },\n  }, React.createElement('label', {\n    text: 'hello',\n  }))\n}\n\n// Create a window and a root container:\nconst win = gui.Window.create({})\nwin.setContentSize({ width: 400, height: 250 })\n\nconst contentView = gui.Container.create()\ncontentView.setStyle({ flexDirection: 'row' })\nwin.setContentView(contentView)\nwin.center()\nwin.activate()\n\n// Create your react elements and render them:\nrender(React.createElement(App), contentView)\n\n// Start your app\nif (!process.versions.yode) {\n  gui.MessageLoop.run()\n  process.exit(0)\n}\n```\n\n## Style / Layout\n\nYue use [yoga layout](https://libyue.com/docs/latest/js/guides/layout_system.html) and you can use these properties in the `style` property. It's also possible to provide other styles via the `style` prop.\n\n - `color`: hex|rgb|rgba|hsl|hsla|name of a color\n - `backgroundColor`: hex|rgb|rgba|hsl|hsla| name of a color\n - `fontSize`: number representing a pixel value\n - `fontWeight`: supports 100-900 and all values in https://libyue.com/docs/latest/js/api/font_weight.html\n - `fontFamily`: name of a font to use\n - `fontStyle`: normal|italic\n - `textAlign`: left|center|right\n - `verticalAlign`: top|middle|bottom\n\n```js\nimport React from 'react'\n\nexport default function MyComp() {\n  return (\n    \u003ccontainer\n      style={{\n        flex: 1,\n        flexDirection: 'row',\n        backgroundColor: 'black'\n      }}\n    \u003e\n      \u003ccontainer\n        style={{\n          justifyContent: 'center',\n        }}\n      \u003e\n        \u003clabel\n          text=\"hello\"\n          style={{\n            color: 'white',\n            fontSize: 14\n          }}\n        /\u003e\n      \u003c/container\u003e\n    \u003c/container\u003e\n  )\n}\n\n```\n\n## Components\n\nBelow are what components and their props you can use with react-yue. For more details, please check the [official document](https://libyue.com/docs/latest/js/).\n\n#### View (base class)\n\n_props:_\n\n- `Boolean` visible\n- `Boolean` enabled\n- `Boolean` focusable\n- `Boolean` mouseDownCanMoveWindow\n\n_events:_\n\n- onMouseDown\n  - params\n    - `View` self\n- onMouseUp\n  - params\n    - `View` self\n    - `MouseEvent` event\n- onMouseMove\n  - params\n    - `View` self\n    - `MouseEvent` event\n- onMouseEnter\n  - params\n    - `View` self\n    - `MouseEvent` event\n- onMouseLeave\n  - params\n    - `View` self\n    - `MouseEvent` event\n- onKeyDown\n  - params\n    - `View` self\n    - `KeyEvent` event\n- onKeyUp\n  - params\n    - `View` self\n    - `KeyEvent` event\n- onSizeChanged\n  - params\n    - `View` self\n    - `KeyEvent` event\n- onCaptureLost\n  - params\n    - `View` self\n    - `KeyEvent` event\n\n#### Button\n\n_props:_\n\n- `Button::Type` type\n- `Boolean` defaultChecked\n- `String` title\n- `Image` image\n\n_events:_\n\n- onClick(self)\n  - params\n    - `Button` self\n\n#### Container\n\n_events:_\n\n- onDraw(self, painter, painter)\n  - params\n    - `Container` self\n    - `Painter` painter - The drawing context of the view.\n    - `RectF` dirty - The area in the view to draw on.\n\n#### Entry\n\n_props:_\n\n- `Entry::Type` type\n- `String` text\n\n_events:_\n\n- onTextChange(self)\n  - params\n    - `Entry` self\n- onActivate(self)\n  - params\n    - `Entry` self\n\n#### Group\n\n_props:_\n\n- `String` title\n- `View` children\n\n#### Label\n\n_props:_\n\n- `String` text\n\n#### ProgressBar\n\n_props:_\n\n- `Number` percent\n- `Boolean` indeterminate\n\n#### Scroll\n\n_props:_\n\n- `Scroll::Policy` hpolicy\n- `Scroll::Policy` vpolicy\n- `Boolean` overlayScrollbar\n- `SizeF size` contentSize\n- `View` children\n\n#### TextEdit\n\n_props:_\n\n- `String` text\n- `Scroll::Policy` hpolicy\n- `Scroll::Policy` vpolicy\n- `Boolean` overlayScrollbar\n\n_events:_\n\n- onTextChange(self)\n  - params\n    - `TextEdit` self\n\n#### Vibrant\n\n_props:_\n\n- `Vibrant::Material` material\n- `Vibrant::BlendingMode` mode\n\n## Using with yackage\n\nReact will `require` its modules dynamically so that you can't correctly package your apps when using [yackage](https://github.com/yue/yackage) to package your Node.js project into an executable.\n\nAs yackage doesn't support customized code transforming, webpack is recommended to bundle your js correctly. You can take [the config of do-space-client](https://github.com/oyyd/do-space-client/blob/master/webpack.config.js) as a reference.\n\n## Run Tests\n\n```\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foyyd%2Freact-yue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foyyd%2Freact-yue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foyyd%2Freact-yue/lists"}