Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-gjs/renderer
A React renderer for the Gnome JS. It provides components and methods allowing to use React to build native Gnome GTK applications.
https://github.com/react-gjs/renderer
gjs gnome gtk gtk3 react reactjs
Last synced: 7 days ago
JSON representation
A React renderer for the Gnome JS. It provides components and methods allowing to use React to build native Gnome GTK applications.
- Host: GitHub
- URL: https://github.com/react-gjs/renderer
- Owner: react-gjs
- License: mit
- Created: 2022-11-10T16:09:53.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-20T01:01:48.000Z (16 days ago)
- Last Synced: 2025-01-22T10:01:41.431Z (14 days ago)
- Topics: gjs, gnome, gtk, gtk3, react, reactjs
- Language: TypeScript
- Homepage:
- Size: 7.69 MB
- Stars: 230
- Watchers: 5
- Forks: 5
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React GJS Renderer
A 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.
This 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.
_This is still a work in progress, bugs and missing features are expected._
## Elements of Gtk3
(All components have full TypeScript type definitions for each supported prop)
List of all GTK3 Widgets provided as JSX Components by this renderer:
- **ActionBar**
- **Box**
- **Button**
- **ButtonBox**
- **CheckButton**
- **ColorButton**
- **EventBox** (Pressable)
- **Expander**
- **FlowBox**
- **Frame**
- **Grid**
- **HeaderBar**
- **Icon**
- **Image**
- **Label**
- **LevelBar**
- **LinkButton**
- **MenuBar**
- **ModelButton**
- **NumberInput**
- **Paned**
- **Popover**
- **PopoverMenu**
- **ProgressBar**
- **RadioButton**
- **Revealer**
- **ScrollBox**
- **SearchBar**
- **SearchEntry** (SearchInput)
- **Selector**
- **Separator**
- **SizeGroupBox**
- **Slider**
- **Spinner**
- **Stack**
- **Switch**
- **TextArea**
- **TextEntry**
- **TextView**
- **VolumeButton**
- **Window**
- **Toolbar**
- **ToolbarButton**
- **ToolbarItem**
- **ToolbarRadioButton**
- **ToolbarSeparator**
- **ToolbarToggleButton**
- **Markup**
- **Big**
- **Bold**
- **Italic**
- **Monospace**
- **Small**
- **Span**
- **Strike**
- **Sub**
- **Sup**
- **Underline**
## Usage
To 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.
Example esbuild setup:
```sh
esbuild ./App.tsx --bundle '--external:gi://*' --external:system --format=esm --outfile=./out.js
```
```tsx
// App.tsx
import Gtk from "gi://Gtk?version=3.0";
import * as React from "react";
import { Box, Label, Renderer, Window } from "react-gjs-renderer";
Gtk.init(null);
const App = () => {
return (
Hello World
);
};
const renderer = new Renderer({
appId: "com.example.app",
});
renderer.start();
```
## Help needed
This renderer is still in early development and there are many components that need to be implemented. If you want to help, please
check [this discussion](https://github.com/ncpa0cpl/react-gjs-renderer/discussions/1).