https://github.com/ncsoft/React-UMG

A React renderer for Unreal Motion Graphics With Unreal.js
https://github.com/ncsoft/React-UMG

javascript react unrealengine

Last synced: about 1 month ago
JSON representation

A React renderer for Unreal Motion Graphics With Unreal.js

• Host: GitHub
• URL: https://github.com/ncsoft/React-UMG
• Owner: ncsoft
• License: other
• Created: 2016-12-12T07:32:30.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-20T02:05:41.000Z (almost 2 years ago)
• Last Synced: 2024-04-27T06:22:38.933Z (8 months ago)
• Topics: javascript, react, unrealengine
• Language: JavaScript
• Size: 48.8 KB
• Stars: 266
• Watchers: 27
• Forks: 39
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-unreal - React-UMG - A React renderer for Unreal Motion Graphics With Unreal.js (UI)

README

        
# [React-UMG](https://github.com/ncsoft/React-UMG) · [![npm version](https://img.shields.io/npm/v/react-umg.svg?style=flat)](https://www.npmjs.com/package/react-umg)

This repository is a fork of [react-umg](https://github.com/drywolf/react-umg) whose original author is [Wolfgang Steiner](https://github.com/drywolf)

A React renderer for Unreal Motion Graphics (https://docs.unrealengine.com/latest/INT/Engine/UMG/)

This project is dependent on [Unreal.js](https://github.com/ncsoft/Unreal.js)

- [Link to Demo](https://github.com/ncsoft/Unreal.js-demo)

##### 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.

### Install

To install React-UMG with npm, run:

`npm i --save react-umg`

### Web-dev like Component Naming

- div(UVerticalBox)

- span(UHorizontalBox)

- text(UTextBlock)

- img(UImage)

- input(EditableText)

### Example

#### Create Component

```js

class MyComponent extends React.Component {

    constructor(props, context) {

        super(props, context);

        this.state = {text:"MyComponent"};

    }

    OnTextChanged(value) {

        this.setState({text: value});

    }

    render() {

        return (

            


                 this.OnTextChanged(value)}/>

                

            

        )

    }

}

```


#### Draw With React-UMG

```js

let widget = ReactUMG.wrap();

widget.AddToViewport();

return () => {

    widget.RemoveFromViewport();

}

```

- [Details](https://github.com/ncsoft/Unreal.js-demo/blob/master/Content/Scripts/demos/src/demo-react.jsx)

### License

- Licensed under the BSD 3-Clause "New" or "Revised" License 

- see [LICENSE](https://github.com/ncsoft/React-UMG/blob/master/LICENSE) for details