Contract Types

TypeScript interface contracts used throughout React GTK for interacting with GTK+ and Pango APIs.

Contract types define the interface contracts for various GTK+ and Pango objects, as well as configuration interfaces for the React GTK renderer.

GtkTooltip

Interface for interacting with GTK tooltips. This contract provides methods to customize tooltip appearance and content.

set_custom · (widgetNativeInstance: any) => void

Replaces the widget packed into the tooltip with a custom widget. The custom widget does not get destroyed when the tooltip goes away. By default a box with a GtkImage and GtkLabel is embedded in the tooltip, which can be configured using set_markup and set_icon_from_icon_name.

Show Example

You need to pass the nativeInstance property of a widget ref to this method:

const widgetRef = useRef<GtkLabelImpl>();

tooltip.set_custom(widgetRef.current.nativeInstance);

set_icon_from_icon_name · (name: string) => void

Sets the icon of the tooltip (which is in front of the text) to be the icon indicated by name. If name is NULL, the image will be hidden.

set_markup · (markup: string) => void

Sets the text of the tooltip to be markup. Accepts Pango markup language.

set_text · (text: string) => void

Sets the text of the tooltip to be plain text.

set_tip_area · (rect: any) => void

Sets the area of the widget, where the contents of this tooltip apply, to be rect (in widget coordinates). This is especially useful for properly setting tooltips on GtkTreeView rows and cells, GtkIconViews, etc.

---

PangoAttrItem

Interface representing a Pango attribute item used for text styling and formatting.

start · number

The start index of the attribute range. -1 is accepted in place of MAXUINT.

end · number

The end index of the attribute range. -1 is accepted in place of MAXUINT.

type · string

The nickname of the attribute value type.

value · string

The attribute value, which can be:

• Enum values as nick or numeric value
• Boolean values as true or false
• Integers and floats as numbers
• Strings as string, optionally quoted
• Font features as quoted string
• Pango Language as string
• Pango FontDescription as serialized by font_description_to_string, quoted
• Pango Color as serialized by color_to_string

---

GtkEntryBuffer

Interface for managing the text buffer of a GTK entry widget.

text · string

The contents of the buffer. This property has both getter and setter.

length · number

The length in characters of the buffer. Read-only.

maxLength · number

The maximum allowed length of the text in the buffer. This property has both getter and setter.

insert_text · (position: number, chars: string, length: number) => void

Inserts length characters of chars into the contents of the buffer, at the specified position.

position · number · required

The position at which to insert text.

chars · string · required

The text to insert.

length · number · required

The number of characters to insert.

delete_text · (position: number, length: number) => void

Deletes a sequence of characters from the buffer.

position · number · required

The position at which to start deleting.

length · number · required

The number of characters to delete.

get_bytes · () => number

Retrieves the length in bytes of the buffer.

---

RootAppConfig

Configuration interface for creating a React GTK root application instance.

id · string · required

The application ID, typically in reverse DNS notation (e.g., com.example.MyApp).

flags · number

Optional GTK application flags. These flags control the application’s behavior.

Example Usage

import { createRoot } from 'react-gtk';

const config: RootAppConfig = {
  id: 'com.example.MyApp',
  flags: 0
};

const root = createRoot(config);

---

RootAppInstance

Interface for the React GTK root application instance returned by createRoot.

render · (element: JSX.Element, argv: string[]) => void

Renders a React element tree into the GTK application.

element · JSX.Element · required

The root React element to render.

argv · string[] · required

Command-line arguments array, typically process.argv.

Example Usage

import { createRoot } from 'react-gtk';
import { App } from './App';

const root = createRoot({
  id: 'com.example.MyApp'
});

root.render(<App />, process.argv);