sphilee / React-UMG

A React renderer for Unreal Motion Graphics With Unreal.js

React-UMG ·

This repository is a fork of react-umg whose original author is Wolfgang Steiner

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

This project is dependent on Unreal.js

• Link to Demo

We recommend using React with Babel 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

class MyComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {text:"MyComponent"};
    }

    OnTextChanged(value) {
        this.setState({text: value});
    }

    render() {
        return (
            <div>
                <uEditableTextBox Text={this.state.text} OnTextChanged={value=> this.OnTextChanged(value)}/>
                <text Text={this.state.text}/>
            </div>
        )
    }
}

Draw With React-UMG

let widget = ReactUMG.wrap(<MyComponent/>);
widget.AddToViewport();
return () => {
    widget.RemoveFromViewport();
}

• Details

License

• Licensed under the MIT license
• see LICENSE for details