{"id":20046599,"url":"https://github.com/ncsoft/react-umg","last_synced_at":"2025-04-06T00:07:03.161Z","repository":{"id":57346971,"uuid":"76232805","full_name":"ncsoft/React-UMG","owner":"ncsoft","description":"A React renderer for Unreal Motion Graphics With Unreal.js","archived":false,"fork":false,"pushed_at":"2022-12-20T02:05:41.000Z","size":50,"stargazers_count":266,"open_issues_count":2,"forks_count":39,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-04-27T06:22:38.933Z","etag":null,"topics":["javascript","react","unrealengine"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ncsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-12T07:32:30.000Z","updated_at":"2024-04-21T17:03:01.000Z","dependencies_parsed_at":"2022-09-17T23:01:28.803Z","dependency_job_id":null,"html_url":"https://github.com/ncsoft/React-UMG","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncsoft%2FReact-UMG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncsoft%2FReact-UMG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncsoft%2FReact-UMG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncsoft%2FReact-UMG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncsoft","download_url":"https://codeload.github.com/ncsoft/React-UMG/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935388,"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":["javascript","react","unrealengine"],"created_at":"2024-11-13T11:24:58.674Z","updated_at":"2025-04-06T00:07:03.137Z","avatar_url":"https://github.com/ncsoft.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [React-UMG](https://github.com/ncsoft/React-UMG) \u0026middot; [![npm version](https://img.shields.io/npm/v/react-umg.svg?style=flat)](https://www.npmjs.com/package/react-umg)\n\nThis repository is a fork of [react-umg](https://github.com/drywolf/react-umg) whose original author is [Wolfgang Steiner](https://github.com/drywolf)\n\nA React renderer for Unreal Motion Graphics (https://docs.unrealengine.com/latest/INT/Engine/UMG/)\n\nThis project is dependent on [Unreal.js](https://github.com/ncsoft/Unreal.js)\n\n- [Link to Demo](https://github.com/ncsoft/Unreal.js-demo)\n\n##### We recommend using React with [Babel](https://babeljs.io) to let you use JSX in your Javascript code. JSX is an extension to the Javascript language that works nicely with React.\n\n### Install\nTo install React-UMG with npm, run:\n\n`npm i --save react-umg`\n\n### Web-dev like Component Naming\n\n- div(UVerticalBox)\n- span(UHorizontalBox)\n- text(UTextBlock)\n- img(UImage)\n- input(EditableText)\n\n### Example\n\n#### Create Component\n\n```js\nclass MyComponent extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {text:\"MyComponent\"};\n    }\n\n    OnTextChanged(value) {\n        this.setState({text: value});\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cuEditableTextBox Text={this.state.text} OnTextChanged={value=\u003e this.OnTextChanged(value)}/\u003e\n                \u003ctext Text={this.state.text}/\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n```\n\n#### Draw With React-UMG\n\n```js\nlet widget = ReactUMG.wrap(\u003cMyComponent/\u003e);\nwidget.AddToViewport();\nreturn () =\u003e {\n    widget.RemoveFromViewport();\n}\n```\n\n- [Details](https://github.com/ncsoft/Unreal.js-demo/blob/master/Content/Scripts/demos/src/demo-react.jsx)\n\n\n### License\n- Licensed under the BSD 3-Clause \"New\" or \"Revised\" License \n- see [LICENSE](https://github.com/ncsoft/React-UMG/blob/master/LICENSE) for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncsoft%2Freact-umg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncsoft%2Freact-umg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncsoft%2Freact-umg/lists"}