{"id":26502851,"url":"https://github.com/grassator/react-qml","last_synced_at":"2025-03-20T18:35:57.507Z","repository":{"id":29877447,"uuid":"33422738","full_name":"grassator/react-qml","owner":"grassator","description":"A bridge library that allows to use React.js with QML","archived":false,"fork":false,"pushed_at":"2017-12-15T17:48:21.000Z","size":21,"stargazers_count":106,"open_issues_count":0,"forks_count":8,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-06-16T04:52:31.570Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grassator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-04T22:36:27.000Z","updated_at":"2024-03-04T17:31:48.000Z","dependencies_parsed_at":"2022-08-22T11:01:40.116Z","dependency_job_id":null,"html_url":"https://github.com/grassator/react-qml","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-qml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-qml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-qml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-qml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grassator","download_url":"https://codeload.github.com/grassator/react-qml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244672065,"owners_count":20491296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-20T18:35:56.889Z","updated_at":"2025-03-20T18:35:57.501Z","avatar_url":"https://github.com/grassator.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003e DEPRECATED. This project is no longer in active development.\n\n# react-qml\n[![GitHub version][git-tag-image]][project-url]\n[![Build Status][travis-image]][travis-url]\n[![Dependency Status][daviddm-url]][daviddm-image]\n[![Inline docs][doc-image]][doc-url]\n[![Code Climate][climate-image]][climate-url]\n\n`react-qml` is a bridge library that allows to use React.js with QML.\n\n## Install\n\nAt 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].\n\nAfter that place it in your QML root, and import by adding following line at the top your `main.qml`:\n\n```qml\n.import 'ReactQml.js' as React\n```\n\n## Example\n\nUsage 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:\n\n```qml\nimport QtQuick 2.4\nimport QtQuick.Controls 1.3\nimport \"js/ReactQml.js\" as React\n\nApplicationWindow {\n    id: root\n    title: qsTr(\"React QML\")\n    width: 300\n    height: 300\n    visible: true\n\n    function reactRender(x, y) {\n        var props = {\n            x: 100,\n            y: 100,\n            width: 100,\n            height: 100,\n            color: '#000'\n        };\n        var childProps = {\n            x: 25,\n            y: 25,\n            width: 50,\n            height: 50,\n            color: '#fff'\n        };\n        var child = React.createElement(React.Rectangle, childProps);\n        React.render(React.createElement(React.Rectangle, props, child), root);\n    }\n\n    Component.onCompleted: {\n        reactRender();\n    }\n}\n```\n\n\n## Contributing\n\nIn 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](http://gulpjs.com/).\n\n\n## License\n\nCopyright (c) 2015 Dmitriy Kubyshkin. Licensed under the MIT license.\n\n\n\n[doc-url]: http://inch-ci.org/github/grassator/react-qml\n[doc-image]: http://inch-ci.org/github/grassator/react-qml.svg?branch=master\n[project-url]: https://github.com/grassator/react-qml\n[git-tag-image]: http://img.shields.io/github/tag/grassator/react-qml.svg\n[climate-url]: https://codeclimate.com/github/grassator/react-qml\n[climate-image]: https://codeclimate.com/github/grassator/react-qml/badges/gpa.svg\n[travis-url]: https://travis-ci.org/grassator/react-qml\n[travis-image]: https://travis-ci.org/grassator/react-qml.svg?branch=master\n[daviddm-url]: https://david-dm.org/grassator/react-qml.svg?theme=shields.io\n[daviddm-image]: https://david-dm.org/grassator/react-qml\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrassator%2Freact-qml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrassator%2Freact-qml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrassator%2Freact-qml/lists"}