{"id":20654976,"url":"https://github.com/react-gjs/renderer","last_synced_at":"2025-05-16T14:05:21.456Z","repository":{"id":65722489,"uuid":"564392850","full_name":"react-gjs/renderer","owner":"react-gjs","description":"A React renderer for the Gnome JS. It provides components and methods allowing to use React to build native Gnome GTK applications.","archived":false,"fork":false,"pushed_at":"2025-04-14T09:53:56.000Z","size":8030,"stargazers_count":232,"open_issues_count":16,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-08T19:35:09.255Z","etag":null,"topics":["gjs","gnome","gtk","gtk3","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/react-gjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-10T16:09:53.000Z","updated_at":"2025-04-25T08:39:21.000Z","dependencies_parsed_at":"2024-09-17T12:46:58.675Z","dependency_job_id":"34f01464-062c-46c0-92f1-5ea6bf72ca5b","html_url":"https://github.com/react-gjs/renderer","commit_stats":null,"previous_names":["react-gjs/renderer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gjs%2Frenderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gjs%2Frenderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gjs%2Frenderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gjs%2Frenderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-gjs","download_url":"https://codeload.github.com/react-gjs/renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"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":["gjs","gnome","gtk","gtk3","react","reactjs"],"created_at":"2024-11-16T18:07:52.439Z","updated_at":"2025-05-16T14:05:21.432Z","avatar_url":"https://github.com/react-gjs.png","language":"TypeScript","readme":"# React GJS Renderer\n\n![NPM Version](https://img.shields.io/npm/v/%40reactgjs%2Frenderer)\n\n\nA React renderer for the [Gnome JS](https://gjs.guide/about/). It provides components and methods allowing to use React to build native Gnome GTK applications.\n\nThis is the renderer used by the [React Gnome](https://github.com/react-gjs/react-gnome), which is the recommended way of bundling applications using this renderer.\n\n_This is still a work in progress, bugs and missing features are expected._\n\n## Elements of Gtk3\n\n(All components have full TypeScript type definitions for each supported prop)\n\nList of all GTK3 Widgets provided as JSX Components by this renderer:\n\n- **ActionBar**\n- **Box**\n- **Button**\n- **ButtonBox**\n- **CheckButton**\n- **ColorButton**\n- **EventBox** (Pressable)\n- **Expander**\n- **FlowBox**\n- **Frame**\n- **Grid**\n- **HeaderBar**\n- **Icon**\n- **Image**\n- **Label**\n- **LevelBar**\n- **LinkButton**\n- **MenuBar**\n- **ModelButton**\n- **NumberInput**\n- **Paned**\n- **Popover**\n- **PopoverMenu**\n- **ProgressBar**\n- **RadioButton**\n- **Revealer**\n- **ScrollBox**\n- **SearchBar**\n- **SearchEntry** (SearchInput)\n- **Selector**\n- **Separator**\n- **SizeGroupBox**\n- **Slider**\n- **Spinner**\n- **Stack**\n- **Switch**\n- **TextArea**\n- **TextEntry**\n- **TextView**\n- **VolumeButton**\n- **Window**\n- **Toolbar**\n  - **ToolbarButton**\n  - **ToolbarItem**\n  - **ToolbarRadioButton**\n  - **ToolbarSeparator**\n  - **ToolbarToggleButton**\n- **Markup**\n  - **Big**\n  - **Bold**\n  - **Italic**\n  - **Monospace**\n  - **Small**\n  - **Span**\n  - **Strike**\n  - **Sub**\n  - **Sup**\n  - **Underline**\n\n## Usage\n\nTo use the renderer standalone, applications need to either define each import as a relative path to the correct file (e.x. `import { Renderer } from \"../node_modules/react-gjs-renderer/dist/index.js\"`) or bundle it into a single `.js` file (this is due to GJS not supporting importing packages from node_modules.) This usually is done using a tool like [webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/), [rollup](https://rollupjs.org/guide/en/), etc.\n\nExample esbuild setup:\n\n```sh\nesbuild ./App.tsx --bundle '--external:gi://*' --external:system  --format=esm --outfile=./out.js\n```\n\n```tsx\n// App.tsx\nimport Gtk from \"gi://Gtk?version=3.0\";\nimport * as React from \"react\";\nimport { Box, Label, Renderer, Window } from \"react-gjs-renderer\";\n\nGtk.init(null);\n\nconst App = () =\u003e {\n  return (\n    \u003cWindow\n      quitOnClose\n      minWidth={200}\n      minHeight={200}\n    \u003e\n      \u003cBox\u003e\n        \u003cLabel\u003eHello World\u003c/Label\u003e\n      \u003c/Box\u003e\n    \u003c/Window\u003e\n  );\n};\n\nconst renderer = new Renderer({\n  appId: \"com.example.app\",\n});\n\nrenderer.start(\u003cApp /\u003e);\n```\n\n## Help needed\n\nThis renderer is still in early development and there are many components that need to be implemented. If you want to help, please\ncheck [this discussion](https://github.com/ncpa0cpl/react-gjs-renderer/discussions/1).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-gjs%2Frenderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-gjs%2Frenderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-gjs%2Frenderer/lists"}