Skip to main content

Variable: x

const x: object

Defined in: jsx.ts:481

GTKX-specific intrinsic elements and components.

This namespace provides React components for GTK layout, lists, menus, and slots that are specific to GTKX (not direct GTK widget bindings).

Type Declaration

NameTypeDescriptionDefined in
ActionRowPrefix"ActionRowPrefix"Place child as a prefix (left side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow. Example <AdwActionRow title="Setting"> <x.ActionRowPrefix> <GtkCheckButton /> </x.ActionRowPrefix> </AdwActionRow>jsx.ts:679
ActionRowSuffix"ActionRowSuffix"Place child as a suffix (right side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow. Example <AdwActionRow title="Setting"> <x.ActionRowSuffix> <GtkButton iconName="go-next-symbolic" /> </x.ActionRowSuffix> </AdwActionRow>jsx.ts:693
Adjustment"Adjustment"Declarative adjustment configuration for adjustable widgets. Works with Scale, Scrollbar, ScaleButton, SpinButton, and ListBox. Example <GtkScale> <x.Adjustment value={50} lower={0} upper={100} onValueChanged={(v) => console.log(v)} /> </GtkScale>jsx.ts:823
CalendarMark"CalendarMark"A day mark on a GtkCalendar. Example <GtkCalendar> <x.CalendarMark day={15} /> <x.CalendarMark day={20} /> <x.CalendarMark day={25} /> </GtkCalendar>jsx.ts:885
ExpanderRowAction"ExpanderRowAction"Action widget container for AdwExpanderRow header. Example <AdwExpanderRow title="Group"> <ExpanderRow.Action> <GtkButton iconName="emblem-system-symbolic" /> </ExpanderRow.Action> </AdwExpanderRow>jsx.ts:941
ExpanderRowRow"ExpanderRowRow"Nested rows container for AdwExpanderRow. Example <AdwExpanderRow title="Settings"> <ExpanderRow.Row> <AdwActionRow title="Option 1" /> <AdwActionRow title="Option 2" /> </ExpanderRow.Row> </AdwExpanderRow>jsx.ts:927
FixedChild"FixedChild"Element type for positioning children within a GtkFixed. Example <GtkFixed> <x.FixedChild x={20} y={30}> <GtkLabel label="Positioned at (20, 30)" /> </x.FixedChild> </GtkFixed>jsx.ts:545
GridChild"GridChild"Element type for positioning children within a GtkGrid. Example <GtkGrid> <x.GridChild column={0} row={0}> <GtkLabel label="Top Left" /> </x.GridChild> </GtkGrid>jsx.ts:531
LevelBarOffset"LevelBarOffset"An offset threshold for a GtkLevelBar. Example <GtkLevelBar> <x.LevelBarOffset id="low" value={0.25} /> <x.LevelBarOffset id="high" value={0.75} /> <x.LevelBarOffset id="full" value={1.0} /> </GtkLevelBar>jsx.ts:899
ListItem"ListItem"Element type for items in a ListView or GridView. Example <x.ListView renderItem={(item) => <GtkLabel label={item.name} />}> <x.ListItem id="1" value={{ name: "Item 1" }} /> </x.ListView>jsx.ts:576
MenuItem"MenuItem"A clickable menu item with action. Example <GtkMenuButton> <x.MenuItem id="open" label="Open" onActivate={handleOpen} /> </GtkMenuButton>jsx.ts:776
MenuSection"MenuSection"A section grouping related menu items. Example <GtkMenuButton> <x.MenuSection label="File"> <x.MenuItem id="open" label="Open" onActivate={handleOpen} /> </x.MenuSection> </GtkMenuButton>jsx.ts:790
MenuSubmenu"MenuSubmenu"A submenu containing nested items. Example <GtkMenuButton> <x.MenuSubmenu label="Export"> <x.MenuItem id="pdf" label="As PDF" onActivate={exportPdf} /> </x.MenuSubmenu> </GtkMenuButton>jsx.ts:804
NavigationPage"NavigationPage"Type-safe page component for AdwNavigationView or AdwNavigationSplitView. The for prop is required and determines valid id values: - AdwNavigationView: any string (page tags for navigation history) - AdwNavigationSplitView: "content" or "sidebar" (slot positions) Example `// In NavigationView - id can be any string <AdwNavigationView history={["home"]}> <x.NavigationPage for={AdwNavigationView} id="home" title="Home"> </x.NavigationPage> // In NavigationSplitView - id is narrowed to "content""sidebar" <x.NavigationPage for={AdwNavigationSplitView} id="sidebar" title="Sidebar"> </x.NavigationPage> <x.NavigationPage for={AdwNavigationSplitView} id="content" title="Content"> </x.NavigationPage> `
NotebookPage"NotebookPage"Element type for a page within a GtkNotebook (tabbed interface). Example <GtkNotebook> <x.NotebookPage label="Tab 1"> <GtkLabel label="Content 1" /> </x.NotebookPage> </GtkNotebook>jsx.ts:559
NotebookPageTab"NotebookPageTab"Element type for a custom widget as the page tab label.jsx.ts:564
OverlayChild"OverlayChild"Element type for overlay children positioned above the main content. Example <GtkOverlay> <GtkImage file="background.png" /> <x.OverlayChild> <GtkLabel label="Overlaid text" /> </x.OverlayChild> </GtkOverlay>jsx.ts:764
PackEnd"PackEnd"Place child at the end (right in LTR) of HeaderBar or ActionBar. Example <GtkHeaderBar> <x.PackEnd> <GtkMenuButton /> </x.PackEnd> </GtkHeaderBar>jsx.ts:721
PackStart"PackStart"Place child at the start (left in LTR) of HeaderBar or ActionBar. Example <GtkHeaderBar> <x.PackStart> <GtkButton label="Back" /> </x.PackStart> </GtkHeaderBar>jsx.ts:707
ScaleMark"ScaleMark"A mark to display on a GtkScale slider. Example <GtkScale> <x.ScaleMark value={0} label="Min" /> <x.ScaleMark value={50} /> <x.ScaleMark value={100} label="Max" /> </GtkScale>jsx.ts:837
Shortcut"Shortcut"A keyboard shortcut definition. Must be a child of x.ShortcutController. Example <x.Shortcut trigger="<Control>s" onActivate={save} /> <x.Shortcut trigger={["F5", "<Control>r"]} onActivate={refresh} /> <x.Shortcut trigger="Escape" onActivate={cancel} disabled={!canCancel} />jsx.ts:1001
ShortcutController"ShortcutController"Declarative keyboard shortcut controller. Attach keyboard shortcuts to a widget. Must contain x.Shortcut children. Example <GtkBox> <x.ShortcutController scope={Gtk.ShortcutScope.GLOBAL}> <x.Shortcut trigger="<Control>f" onActivate={() => setSearchMode(s => !s)} /> <x.Shortcut trigger="<Control>q" onActivate={quit} /> </x.ShortcutController> </GtkBox>jsx.ts:987
SimpleListItem"SimpleListItem"Element type for simple string-based list items. Example <GtkDropDown> <x.SimpleListItem id="opt1" value="Option 1" /> </GtkDropDown>jsx.ts:602
SourceBuffer"SourceBuffer"Declarative source buffer for a GtkSourceView with syntax highlighting. Example <GtkSourceView> <x.SourceBuffer text={code} language="typescript" styleScheme="Adwaita-dark" highlightMatchingBrackets onTextChanged={(text) => console.log(text)} /> </GtkSourceView>jsx.ts:871
StackPage"StackPage"Element type for pages within a GtkStack or AdwViewStack. Example <GtkStack page="page1"> <x.StackPage id="page1" title="First Page"> <GtkLabel label="Content 1" /> </x.StackPage> </GtkStack>jsx.ts:517
TextBuffer"TextBuffer"Declarative text buffer for a GtkTextView. Example <GtkTextView> <x.TextBuffer text="Hello!" enableUndo onTextChanged={(text) => console.log(text)} /> </GtkTextView>jsx.ts:853
Toggle"Toggle"A toggle button for an AdwToggleGroup. Example <AdwToggleGroup> <x.Toggle id="list" iconName="view-list-symbolic" /> <x.Toggle id="grid" iconName="view-grid-symbolic" /> </AdwToggleGroup>jsx.ts:912
ToolbarBottom"ToolbarBottom"Place toolbar at the bottom of AdwToolbarView. Example <AdwToolbarView> <x.ToolbarBottom> <GtkActionBar /> </x.ToolbarBottom> </AdwToolbarView>jsx.ts:749
ToolbarTop"ToolbarTop"Place toolbar at the top of AdwToolbarView. Example <AdwToolbarView> <x.ToolbarTop> <AdwHeaderBar /> </x.ToolbarTop> </AdwToolbarView>jsx.ts:735
TreeListItem"TreeListItem"Element type for items in a TreeListView. Example <x.TreeListView renderItem={(item) => <GtkLabel label={item.name} />}> <x.TreeListItem id="parent" value={{ name: "Parent" }}> <x.TreeListItem id="child" value={{ name: "Child" }} /> </x.TreeListItem> </x.TreeListView>jsx.ts:590
ColumnViewColumn()(props) => ReactElementComponent for defining columns in a ColumnView (table widget). Example <GtkColumnView> <x.ColumnViewColumn id="name" title="Name" expand renderCell={(item) => <GtkLabel label={item?.name ?? ""} />} /> </GtkColumnView>jsx.ts:619
GridView()(props) => ReactElementVirtualized grid component with custom item rendering. Example <x.GridView renderItem={(item) => <GtkImage iconName={item?.icon ?? ""} />}> <x.ListItem id="1" value={{ icon: "folder" }} /> </x.GridView>jsx.ts:647
ListView()(props) => ReactElementVirtualized list component with custom item rendering. Example <x.ListView renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}> <x.ListItem id="1" value={{ name: "Apple" }} /> </x.ListView>jsx.ts:633
Slot()(props) => ReactElementType-safe slot component for placing children in named widget slots. GTK widgets often have named slots for specific child positions (e.g., titleWidget, startWidget). This component provides type-safe access to those slots. Example <GtkHeaderBar> <x.Slot for={GtkHeaderBar} id="titleWidget"> <GtkLabel label="App Title" /> </x.Slot> </GtkHeaderBar>jsx.ts:497
TreeListView()(props) => ReactElementTree list component with hierarchical data and expand/collapse support. Example <x.TreeListView renderItem={(item, row) => <GtkLabel label={item.name} />}> <x.TreeListItem id="root" value={{ name: "Root" }}> <x.TreeListItem id="child" value={{ name: "Child" }} /> </x.TreeListItem> </x.TreeListView>jsx.ts:663

Example

import { x, GtkHeaderBar, GtkDropDown } from "@gtkx/react";

<GtkHeaderBar>
<x.Slot for={GtkHeaderBar} id="titleWidget">
<GtkLabel label="App Title" />
</x.Slot>
</GtkHeaderBar>

<GtkDropDown>
<x.SimpleListItem id="opt1" value="Option 1" />
<x.SimpleListItem id="opt2" value="Option 2" />
</GtkDropDown>