/React-UMG

A React renderer for Unreal Motion Graphics With Unreal.js

Primary LanguageJavaScriptOtherNOASSERTION

React-UMG · npm version

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

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();
}

License

  • Licensed under the BSD 3-Clause "New" or "Revised" License
  • see LICENSE for details