@peachy/react

This package contains a React renderer for GTK.

It implements a custom react-reconciler, which is responsible for rendering React components into the GTK "DOM".

Installation

You can install this package with npm:

npm install @peachy/react @peachy/core

For typescript, you will need to install the GTK types:

npm install @peachy/types

Then setup your config file

// tsconfig.json
{
  "extends": "@peachy/react/tsconfig",
  "include": ["@peachy/types"]
}

Usage

Here is a basic example that creates a GTK application window with a label:

import Gtk from "gi://Gtk?version=4.0";
import { render } from "@peachy/react";

const app = Gtk.Application.new(
  "com.hello.world",
  Gio.ApplicationFlags.DEFAULT_FLAGS,
);

app.connect("activate", () => {
  const app_window = Gtk.ApplicationWindow.new(app);

  render(<Gtk.Label label="Hello, World!" />, app_window);

  app_window.present();
});

app.run([]);

You can also create reusable components using React's component system. For example, you can create a custom button component:

import Gtk from "gi://Gtk?version=4.0";
import { render } from "@peachy/react";

const Button = ({ label, onClick }) => (
  <Gtk.Button label={label} onClick={onClick} />
);

const app = Gtk.Application.new(
  "com.hello.world",
  Gio.ApplicationFlags.DEFAULT_FLAGS,
);

app.connect("activate", () => {
  const app_window = Gtk.ApplicationWindow.new(app);

  render(
    <Button label="Click me!" onClick={() => console.log("Button clicked")} />,
    app_window
  );

  app_window.present();
});

app.run([]);

References

• https://github.com/VisualElectric/pixi-react
• react-reconciler
• https://github.com/samuelscheit/react-native-skia-list
• https://github.com/jiayihu/react-tiny-dom