DEPRECATED. This project is no longer in active development.

GitHub version Build Status Dependency Status Inline docs Code Climate

react-qml is a bridge library that allows to use React.js with QML.

At the moment ReactQml requires special manual bundling before it can be used inside Qml, so you have to download javascript bundle manually from [releases pages|https://github.com/grassator/react-qml/releases].

After that place it in your QML root, and import by adding following line at the top your main.qml:

.import 'ReactQml.js' as React

Usage of ReactQml is pretty straightforward — the only difference from web version is that you need to pass id of the qml item to React.render instead of DOM node. For example:

import QtQuick 2.4
import QtQuick.Controls 1.3
import "js/ReactQml.js" as React
ApplicationWindow {
 id: root
 title: qsTr("React QML")
 width: 300
 height: 300
 visible: true
 function reactRender(x, y) {
 var props = {
 x: 100,
 y: 100,
 width: 100,
 height: 100,
 color: '#000'
 };
 var childProps = {
 x: 25,
 y: 25,
 width: 50,
 height: 50,
 color: '#fff'
 };
 var child = React.createElement(React.Rectangle, childProps);
 React.render(React.createElement(React.Rectangle, props, child), root);
 }
 Component.onCompleted: {
 reactRender();
 }
}

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using gulp.

Copyright (c) 2015 Dmitriy Kubyshkin. Licensed under the MIT license.