{"id":28766164,"url":"https://github.com/amorgaut/react-efl","last_synced_at":"2026-04-28T00:32:36.034Z","repository":{"id":52420065,"uuid":"116524585","full_name":"AMorgaut/react-efl","owner":"AMorgaut","description":"Allows to represent Enlightenment Efl components as a DOM structure.","archived":false,"fork":false,"pushed_at":"2021-04-29T19:33:15.000Z","size":48,"stargazers_count":2,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T02:43:11.180Z","etag":null,"topics":["dom-structure","efl","enlightenment","react","react-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AMorgaut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-07T00:03:03.000Z","updated_at":"2019-09-30T00:36:13.000Z","dependencies_parsed_at":"2022-08-28T02:41:52.804Z","dependency_job_id":null,"html_url":"https://github.com/AMorgaut/react-efl","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/AMorgaut/react-efl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AMorgaut%2Freact-efl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AMorgaut%2Freact-efl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AMorgaut%2Freact-efl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AMorgaut%2Freact-efl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AMorgaut","download_url":"https://codeload.github.com/AMorgaut/react-efl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AMorgaut%2Freact-efl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260351161,"owners_count":22995900,"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":["dom-structure","efl","enlightenment","react","react-component"],"created_at":"2025-06-17T11:41:29.017Z","updated_at":"2026-04-28T00:32:36.027Z","avatar_url":"https://github.com/AMorgaut.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-efl\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n[![Sonarcloud][sonarcloud-badge]][sonarcloud]\n\nAllows to represent Enlightenment Efl components as a DOM structure.\n\nExample\n```jsx\n\u003cWin\u003e\n    \u003cGroup name={'text-block'}\n           position={pos}\n           zoom={{sx: -10, sy: -10, x: 200, y: 21}}\n           rotate={{d: -5, x: 200, y: 21}}\u003e\n        \u003cRectangle position={pos}\n                   size={{ w: 400, h }}\n                   color={{ r: 200, g: 200, b: 200 }}/\u003e\n        \u003cImage position={pos}\n               size={size}\n               file={'http://example.com/logo.png'} /\u003e\n        \u003cText position={{ x: 70, y }}\n              color={'#F55'}\n              font_size={h}\n              linesize={h}\n              valign={'middle'}\u003e\n            react-efl \u003cColor color={'#00A'}\u003edemo\u003c/Color\u003e\n        \u003c/Text\u003e\n    \u003c/Group\u003e\n\u003c/Win\u003e\n```\n\nIt can be interesting to render an EFL view in the browser and see its representation  from the [React Chrome Developer tools](https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html)\n\n# Current Status\n\nVery Basic implementation of the [`Efl.Canvas`](https://www.enlightenment.org/develop/api/efl/canvas) `Group`, `Rectangle`, `Image`, \u0026 `Text`\n\nSupport most of the [Evas TextBlock Style definitions](https://docs.enlightenment.org/auto/evas_textblock_style_page.html) (more information in the [Evas support dedicated page](./src/Evas/README.md))\n\n# Roadmap\n\n1. Add Unit tests\n2. Handle positioning\n3. Support more `Group`, `Rectangle`, `Image`, \u0026 `Text` features\n4. Support more [`Efl.Object`](https://www.enlightenment.org/develop/api/efl/object) \u0026 [`Efl.Canvas`](https://www.enlightenment.org/develop/api/efl/canvas) level features\n5. some Animations features\n6. Many potential things like `Video`or `Player` support, or anything requested via the [Issues project page](https://github.com/AMorgaut/react-efl/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) ...\n\n[build-badge]: https://img.shields.io/travis/AMorgaut/react-efl/master.png?style=flat-square\n[build]: https://travis-ci.org/AMorgaut/react-efl\n\n[npm-badge]: https://img.shields.io/npm/v/react-efl.png?style=flat-square\n[npm]: https://www.npmjs.org/package/react-efl\n\n[coveralls-badge]: https://img.shields.io/coveralls/AMorgaut/react-efl/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/AMorgaut/react-efl\n\n[sonarcloud-badge]: https://sonarcloud.io/api/badges/gate?key=react-efl\n[sonarcloud]: https://sonarcloud.io/dashboard?id=react-efl\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famorgaut%2Freact-efl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famorgaut%2Freact-efl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famorgaut%2Freact-efl/lists"}