DEPRECATED. This project is no longer in active development.

react-qml

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

Install

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

Example

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

Contributing

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.

License

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