react-components

Interfaces

RadioButtonItem

Defined in: react-components/RadioButtons.tsx:10

Single item descriptor for RadioButtons group.

Type Parameters

Type Parameter
T

Properties

Property	Type	Description	Defined in
key	T	Unique value or identifier for this radio choice.	react-components/RadioButtons.tsx:12
caption	LocalisedString	Localised caption to display next to the radio button.	react-components/RadioButtons.tsx:14

---

RadioButtonsProps

Defined in: react-components/RadioButtons.tsx:20

Props for the RadioButtons group component.

Type Parameters

Type Parameter
T

Properties

Property	Type	Description	Defined in
buttons?	RadioButtonItem<T>[]	Array of radio button item choices.	react-components/RadioButtons.tsx:22
value?	T	Currently selected choice key.	react-components/RadioButtons.tsx:24
onChange?	(this: void, value: T) => void	Callback fired with the newly selected key when the user selects a choice.	react-components/RadioButtons.tsx:26
direction?	"vertical" | "horizontal"	Layout direction for the radio group. Default "vertical"	react-components/RadioButtons.tsx:31

---

SectionSlotData

Defined in: react-components/SectionGroup.tsx:49

Properties

Property	Type	Defined in
signal?	SignalID	react-components/SectionGroup.tsx:50
count?	number	react-components/SectionGroup.tsx:51
selected?	boolean	react-components/SectionGroup.tsx:52
upper?	number	react-components/SectionGroup.tsx:53

---

SectionGroupProps

Defined in: react-components/SectionGroup.tsx:56

Properties

Property	Type	Description	Defined in
key?	Key	-	react-components/SectionGroup.tsx:57
name?	string	Name of the group	react-components/SectionGroup.tsx:59
placeholder?	string	Placeholder text when name is empty	react-components/SectionGroup.tsx:61
active?	boolean	Whether the section is active / enabled	react-components/SectionGroup.tsx:63
onActiveChange?	(this: void, active: boolean) => void	Callback when active checkbox state changes	react-components/SectionGroup.tsx:65
onNameChange?	(this: void, newName: string) => void	Callback when name is edited	react-components/SectionGroup.tsx:67
onDelete?	(this: void) => void	Callback when section is deleted	react-components/SectionGroup.tsx:69
slotCount?	number	Total number of slots to display (default: 10)	react-components/SectionGroup.tsx:71
columnCount?	number	Number of columns in slot table (default: 10)	react-components/SectionGroup.tsx:73
tableStyle?	any	Style for slot table (default: “table”)	react-components/SectionGroup.tsx:75
slots?	| Record<number, SectionSlotData> | SectionSlotData[]	Array or Record of slot data (1-based index or array)	react-components/SectionGroup.tsx:77
selectedSlot?	number	Currently selected slot index (1-based)	react-components/SectionGroup.tsx:79
onSlotClick?	(this: void, slotIndex: number, ev: OnGuiClickEvent) => void	Callback when a slot is clicked	react-components/SectionGroup.tsx:81
onSlotChange?	(this: void, slotIndex: number, signal: any, ev: any) => void	Callback when a slot’s signal is changed / chosen in picker	react-components/SectionGroup.tsx:83
styles?	StylesFor<"flow">	Custom styles for the root container flow	react-components/SectionGroup.tsx:85

---

WindowFrameProps

Defined in: react-components/WindowFrame.tsx:10

Props for the WindowFrame top-level dialog component.

Extends

• FrameProps

Properties

Property	Type	Description	Overrides	Inherited from	Defined in
caption	LocalisedString	Window title displayed in the header titlebar.	FrameProps.caption	-	react-components/WindowFrame.tsx:12
playerIndex?	PlayerIndex	Player index owning this window (used for position memory and pin state).	-	-	react-components/WindowFrame.tsx:14
pinnable?	boolean	If true, shows the pin button and persists pinned state per player. Default false	-	-	react-components/WindowFrame.tsx:19
defaultPinned?	boolean	Initial pinned state when uncontrolled.	-	-	react-components/WindowFrame.tsx:21
autoCenter?	boolean	Automatically centers the window in the viewport when opened.	-	-	react-components/WindowFrame.tsx:23
windowKey?	string	Unique storage key for saving window position and pin state.	-	-	react-components/WindowFrame.tsx:25
locationDebounceTicks?	number	Delay in game ticks before saving dragged window position to storage. Default: 30 (0.5s).	-	-	react-components/WindowFrame.tsx:27
draggable?	boolean	Whether the window can be dragged by its titlebar. Default true	-	-	react-components/WindowFrame.tsx:32
closable?	boolean	Whether to show a close button in the titlebar. Default true	-	-	react-components/WindowFrame.tsx:37
onClose?	(this: void, ev?: OnGuiClickEvent) => void	Callback fired when the window is closed.	-	-	react-components/WindowFrame.tsx:39
pinned?	boolean	Controlled pinned state.	-	-	react-components/WindowFrame.tsx:41
onTogglePin?	(this: void, pinned: boolean, ev?: OnGuiClickEvent) => void	Callback fired when the player toggles the pin state.	-	-	react-components/WindowFrame.tsx:43
dragHandleRef?	(this: void, elem: any) => void	Ref callback to access the draggable empty widget element.	-	-	react-components/WindowFrame.tsx:45
titleDecoration?	| ReactNode | ReactNode[]	Extra React nodes rendered in the titlebar between title and action buttons.	-	-	react-components/WindowFrame.tsx:47
anchor?	GuiAnchor	-	-	FrameProps.anchor	react/generated-props.ts:124
auto_center?	boolean	-	-	FrameProps.auto_center	react/generated-props.ts:125
direction?	GuiDirection	-	-	FrameProps.direction	react/generated-props.ts:127
drag_target?	FrameGuiElement	-	-	FrameProps.drag_target	react/generated-props.ts:128
elem_tooltip?	ElemID	-	-	FrameProps.elem_tooltip	react/generated-props.ts:129
enabled?	boolean	-	-	FrameProps.enabled	react/generated-props.ts:130
game_controller_interaction?	game_controller_interaction	-	-	FrameProps.game_controller_interaction	react/generated-props.ts:131
ignored_by_interaction?	boolean	-	-	FrameProps.ignored_by_interaction	react/generated-props.ts:132
index?	number	-	-	FrameProps.index	react/generated-props.ts:133
location?	any	-	-	FrameProps.location	react/generated-props.ts:134
locked?	boolean	-	-	FrameProps.locked	react/generated-props.ts:135
name?	string	-	-	FrameProps.name	react/generated-props.ts:136
raise_hover_events?	boolean	-	-	FrameProps.raise_hover_events	react/generated-props.ts:137
tooltip?	LocalisedString	-	-	FrameProps.tooltip	react/generated-props.ts:138
visible?	boolean	-	-	FrameProps.visible	react/generated-props.ts:139
ref?	Ref<any>	Ref callback or mutable ref object to capture the live C++ LuaGuiElement.	-	FrameProps.ref	react/types.ts:411
children?	| ReactNode | ReactNode[]	Child JSX elements.	-	FrameProps.children	react/types.ts:417
styles?	StylesFor<E>	Custom style overrides passed as an object (e.g. { width: 100, font: "default-bold" }).	-	FrameProps.styles	react/types.ts:419
style?	any	Prototype style name defined in Factorio prototypes (e.g. "frame", "subheader_frame").	-	FrameProps.style	react/types.ts:421
onClosed?	(this: void, event: TypedEvent<OnGuiClosedEvent, "frame">) => void	-	-	FrameProps.onClosed
onHover?	(this: void, event: TypedEvent<OnGuiHoverEvent, "frame">) => void	-	-	FrameProps.onHover
onLeave?	(this: void, event: TypedEvent<OnGuiLeaveEvent, "frame">) => void	-	-	FrameProps.onLeave
onLocationChanged?	(this: void, event: TypedEvent<OnGuiLocationChangedEvent, "frame">) => void	-	-	FrameProps.onLocationChanged
onOpened?	(this: void, event: TypedEvent<OnGuiOpenedEvent, "frame">) => void	-	-	FrameProps.onOpened

Type Aliases

ButtonProps

type ButtonProps = PrimitiveProps<"button">;

Defined in: react-components/Button.tsx:6

Props for the Factorio Button component.

---

CameraProps

type CameraProps = PrimitiveProps<"camera">;

Defined in: react-components/Camera.tsx:6

Props for the Camera component.

---

CheckboxProps

type CheckboxProps = Omit<PrimitiveProps<"checkbox">, "onCheckedStateChanged"> & object;

Defined in: react-components/Checkbox.tsx:7

Props for the Factorio Checkbox component.

Type Declaration

Name	Type	Description	Defined in
onChange()?	(this: void, state: boolean, ev: Color) => void	Callback fired when the player changes the checked state. Provides the new boolean state directly as the first argument.	react-components/Checkbox.tsx:12

---

CloseButtonProps

type CloseButtonProps = SpriteButtonProps;

Defined in: react-components/CloseButton.tsx:7

Props for the Factorio CloseButton component.

---

DropdownOption

type DropdownOption<T> = object;

Defined in: react-components/Dropdown.tsx:7

Option entry for key-value Dropdown.

Type Parameters

Type Parameter	Default type
T	string | number

Properties

Property	Type	Description	Defined in
key	T	Unique key or enum value corresponding to the option.	react-components/Dropdown.tsx:9
caption	Color	Localised string or caption to display in the dropdown list.	react-components/Dropdown.tsx:11

---

DropdownProps

type DropdownProps<T> = Omit<PrimitiveProps<"drop-down">, "items" | "selected_index" | "onSelectionStateChanged"> & object;

Defined in: react-components/Dropdown.tsx:18

Props for the Factorio Dropdown component. Supports both high-level key-value options and native 1-based items.

Type Declaration

Name	Type	Description	Defined in
options?	DropdownOption<T>[]	List of structured options with keys and captions.	react-components/Dropdown.tsx:20
value?	T	Currently selected option key when using options.	react-components/Dropdown.tsx:22
onChange()?	(this: void, value: T, index: number, ev: Color) => void	Callback fired with the selected option’s key, 1-based index, and native event.	react-components/Dropdown.tsx:24
items?	Color[]	Native Factorio list of item captions.	react-components/Dropdown.tsx:27
selected_index?	number	Native 1-based selected index.	react-components/Dropdown.tsx:29
onSelectionStateChanged()?	(this: void, ev: Color) => void	Low-level Factorio selection event handler.	react-components/Dropdown.tsx:31

Type Parameters

Type Parameter	Default type
T	string | number

---

EmptyWidgetProps

type EmptyWidgetProps = PrimitiveProps<"empty-widget">;

Defined in: react-components/EmptyWidget.tsx:6

Props for the Factorio EmptyWidget component.

---

EntityPreviewProps

type EntityPreviewProps = PrimitiveProps<"entity-preview">;

Defined in: react-components/EntityPreview.tsx:6

Props for the EntityPreview component.

---

FixedWindowFrameProps

type FixedWindowFrameProps = FrameProps;

Defined in: react-components/FixedWindowFrame.tsx:7

Props for the FixedWindowFrame component.

---

FrameProps

type FrameProps = PrimitiveProps<"frame">;

Defined in: react-components/Frame.tsx:6

Props for the Frame component.

---

HFlowProps

type HFlowProps = Omit<PrimitiveProps<"flow">, "direction">;

Defined in: react-components/HFlow.tsx:6

Props for the HFlow component.

---

IndicatorProps

type IndicatorProps = Omit<SpriteProps, "sprite" | "children"> & object;

Defined in: react-components/Indicator.tsx:9

Props for the Indicator LED status component.

Type Declaration

Name	Type	Description	Defined in
color?	IndicatorColor	Status color for the LED dot. Default "green"	react-components/Indicator.tsx:14

---

InputProps

type InputProps = Omit<PrimitiveProps<"textfield">, "onTextChanged" | "onConfirmed" | "ref"> & object;

Defined in: react-components/Input.tsx:7

Props for the Factorio Input (textfield) component.

Type Declaration

Name	Type	Description	Defined in
ref?	Ref<Color>	Reference to the underlying native TextFieldGuiElement.	react-components/Input.tsx:9
min_value?	number	Minimum numeric value allowed when numeric is true.	react-components/Input.tsx:11
max_value?	number	Maximum numeric value allowed when numeric is true.	react-components/Input.tsx:13
clamp_on_change?	boolean	Automatically clamps the input text to [min_value, max_value] on every keystroke. Default false	react-components/Input.tsx:18
debounceTicks?	number	Delay in game ticks before firing onChange. When specified, debounces rapid keystrokes (e.g. debounceTicks={30}).	react-components/Input.tsx:23
onChange()?	(this: void, text: string, ev: Color, numericValue?: number) => void	Callback fired when text changes. Receives string text as 1st arg and parsed integer as 3rd arg (if numeric).	react-components/Input.tsx:28
onConfirm()?	(this: void, text: string, ev: Color, numericValue?: number) => void	Callback fired when the player presses Enter/Confirm in the textfield.	react-components/Input.tsx:32

---

LabelProps

type LabelProps = PrimitiveProps<"label"> & object;

Defined in: react-components/Label.tsx:7

Props for the Factorio Label component.

Type Declaration

Name	Type	Description	Defined in
bold?	boolean	If true, applies font = "default-bold".	react-components/Label.tsx:9
large?	boolean	If true, applies font = "default-large".	react-components/Label.tsx:11
richText?	boolean	If true, enables rich text tags [item=...], [color=...] in caption.	react-components/Label.tsx:13
multiline?	boolean	If true, allows the text to wrap across multiple lines (single_line = false).	react-components/Label.tsx:15

---

LabeledProps

type LabeledProps = HFlowProps & object;

Defined in: react-components/Labeled.tsx:10

Props for the Labeled form row component.

Type Declaration

Name	Type	Description	Defined in
caption	Color	Text or localized string for the left label.	react-components/Labeled.tsx:12
label_props?	LabelProps	Optional custom props forwarded to the Label component.	react-components/Labeled.tsx:14

---

LineProps

type LineProps = PrimitiveProps<"line">;

Defined in: react-components/Line.tsx:6

Props for the Line component.

---

ListboxProps

type ListboxProps = PrimitiveProps<"list-box">;

Defined in: react-components/Listbox.tsx:6

Props for the Factorio Listbox component.

---

MinimapProps

type MinimapProps = PrimitiveProps<"minimap">;

Defined in: react-components/Minimap.tsx:6

Props for the Minimap component.

---

PinButtonProps

type PinButtonProps = SpriteButtonProps & object;

Defined in: react-components/PinButton.tsx:8

Props for the PinButton component.

Type Declaration

Name	Type	Description	Defined in
pinned?	boolean	Current pinned state of the window.	react-components/PinButton.tsx:10
onTogglePin()?	(this: void, pinned: boolean, ev: Color) => void	Callback fired when the player toggles the pin button.	react-components/PinButton.tsx:12

---

ProgressBarProps

type ProgressBarProps = PrimitiveProps<"progressbar">;

Defined in: react-components/ProgressBar.tsx:6

Props for the Factorio ProgressBar component.

---

RadioButtonProps

type RadioButtonProps = PrimitiveProps<"radiobutton">;

Defined in: react-components/RadioButton.tsx:6

Props for the Factorio RadioButton component.

---

ScrollPaneProps

type ScrollPaneProps = PrimitiveProps<"scroll-pane">;

Defined in: react-components/ScrollPane.tsx:6

Props for the Factorio ScrollPane component.

---

ShallowSectionProps

type ShallowSectionProps = FrameProps;

Defined in: react-components/ShallowSection.tsx:8

Props for the ShallowSection component.

---

SliderProps

type SliderProps = Omit<PrimitiveProps<"slider">, "onValueChanged" | "value" | "slider_value"> & object;

Defined in: react-components/Slider.tsx:7

Props for the Factorio Slider component.

Type Declaration

Name	Type	Description	Defined in
value?	number	Numeric value of the slider.	react-components/Slider.tsx:9
debounceTicks?	number	Delay in game ticks before firing onChange. When specified, debounces rapid sliding adjustments (e.g. debounceTicks={15}).	react-components/Slider.tsx:14
onChange()?	(this: void, value: number, ev: Color) => void	Callback fired when the slider value is changed by the player.	react-components/Slider.tsx:16

---

SlotButtonProps

type SlotButtonProps = Omit<PrimitiveProps<"choose-elem-button">, "onElemChanged" | "elem_value" | "elem_type"> & object;

Defined in: react-components/SlotButton.tsx:8

Props for the SlotButton component.

Type Declaration

Name	Type	Description	Defined in
signal?	Color	The active signal to display in the slot.	react-components/SlotButton.tsx:10
onChange()?	(this: void, signal: Color | undefined, ev: Color) => void	Callback fired when the player changes or clears the signal.	react-components/SlotButton.tsx:12
locked?	boolean	If true, the slot button cannot open the native signal picker; clicks trigger onClick.	react-components/SlotButton.tsx:14
count?	number | string	Numeric count badge displayed in the lower-right corner (auto-formatted with SI units) or custom string.	react-components/SlotButton.tsx:16
count_color?	Color	Custom text color for the count label.	react-components/SlotButton.tsx:18
upper?	number | string	Optional secondary numeric badge displayed in the upper-right corner or custom string.	react-components/SlotButton.tsx:20
upper_color?	Color	Custom text color for the upper label.	react-components/SlotButton.tsx:22
selected?	boolean	If true, applies active yellow border selection style.	react-components/SlotButton.tsx:24
onClick()?	(this: void, ev: Color) => void	Callback fired when the slot is clicked (especially in locked mode).	react-components/SlotButton.tsx:26

---

SlotButtonTableProps

type SlotButtonTableProps = TableProps;

Defined in: react-components/SlotButtonTable.tsx:7

Props for the SlotButtonTable grid component.

---

SpriteProps

type SpriteProps = PrimitiveProps<"sprite">;

Defined in: react-components/Sprite.tsx:6

Props for the Sprite component.

---

SpriteButtonProps

type SpriteButtonProps = PrimitiveProps<"sprite-button">;

Defined in: react-components/SpriteButton.tsx:6

Props for the Factorio SpriteButton component.

---

SwitchProps

type SwitchProps = Omit<PrimitiveProps<"switch">, "onSwitchStateChanged"> & object;

Defined in: react-components/Switch.tsx:7

Props for the Factorio Switch component.

Type Declaration

Name	Type	Description	Defined in
value?	Color | boolean | 0 | 1 | 2	Current switch state. Accepts `“left”	“right”
onChange()?	(this: void, state: Color, ev: Color) => void	Callback fired when the switch position changes.	react-components/Switch.tsx:14

---

TabProps

type TabProps = Omit<PrimitiveProps<"tab">, "children"> & object;

Defined in: react-components/Tab.tsx:7

Props for the Tab definition component.

Type Declaration

Name	Type	Description	Defined in
caption	Color	Text or localized string displayed on the tab header button.	react-components/Tab.tsx:9
badge_text?	Color	Optional badge text displayed on the tab header (e.g. item count or notification).	react-components/Tab.tsx:11
children	| ReactNode | ReactNode[]	Content to render when this tab is active.	react-components/Tab.tsx:13

---

TabbedPaneProps

type TabbedPaneProps = object;

Defined in: react-components/TabbedPane.tsx:14

Props for the TabbedPane multi-tab container.

Properties

Property	Type	Description	Defined in
children?	ReactNode	<Tab> child elements.	react-components/TabbedPane.tsx:16
selected_tab_index?	number	Controlled 1-based index of the active tab.	react-components/TabbedPane.tsx:18
default_tab_index?	number	Initial active tab index (1-based) in uncontrolled mode. Default 1	react-components/TabbedPane.tsx:23
onSelectedTabChanged?	(this: void, index: number) => void	Callback fired when the active tab index changes.	react-components/TabbedPane.tsx:25
styles?	StylesFor<"flow">	Custom styles applied to the outer layout container flow.	react-components/TabbedPane.tsx:27

---

TableProps

type TableProps = PrimitiveProps<"table">;

Defined in: react-components/Table.tsx:6

Props for the Table component.

---

TitlebarProps

type TitlebarProps = HFlowProps & object;

Defined in: react-components/Titlebar.tsx:11

Props for the Titlebar window header component.

Type Declaration

Name	Type	Description	Defined in
caption?	Color	Title text or localized string.	react-components/Titlebar.tsx:13
draggable?	boolean	Whether to display a draggable spacer across the header. Default true	react-components/Titlebar.tsx:18
closable?	boolean	Whether to display a close button. Default true	react-components/Titlebar.tsx:23
onClose()?	(this: void, ev?: Color) => void	Callback fired when the close button is clicked.	react-components/Titlebar.tsx:25
dragHandleRef()?	(this: void, elem: Color | undefined) => void	Ref callback to access the draggable empty widget element.	react-components/Titlebar.tsx:27
drag_target?	Color	Native parent frame target for dragging.	react-components/Titlebar.tsx:29

---

VFlowProps

type VFlowProps = Omit<PrimitiveProps<"flow">, "direction">;

Defined in: react-components/VFlow.tsx:6

Props for the VFlow component.

---

WellFoldProps

type WellFoldProps = Omit<WellSectionProps, "header_decoration" | "collapsed"> & object;

Defined in: react-components/WellFold.tsx:8

Props for the WellFold collapsible section component.

Type Declaration

Name	Type	Description	Defined in
defaultCollapsed?	boolean	Whether the section starts collapsed by default. Default true	react-components/WellFold.tsx:13

---

WellHeaderProps

type WellHeaderProps = FrameProps & object;

Defined in: react-components/WellHeader.tsx:9

Props for the WellHeader component.

Type Declaration

Name	Type	Description	Defined in
caption_element?	ReactNode	Optional custom React node used as caption element.	react-components/WellHeader.tsx:11

---

WellSectionProps

type WellSectionProps = VFlowProps & object;

Defined in: react-components/WellSection.tsx:9

Props for the WellSection container component.

Type Declaration

Name	Type	Description	Defined in
caption?	Color	Text or localized string caption for the header bar.	react-components/WellSection.tsx:11
caption_element?	ReactNode	Optional custom React node for the header caption.	react-components/WellSection.tsx:13
collapsed?	boolean	Whether the body content is hidden.	react-components/WellSection.tsx:15
header_decoration?	| ReactNode | ReactNode[]	Optional right-aligned action buttons or badges in the header bar.	react-components/WellSection.tsx:17

Functions

Button()

function Button(props: ButtonProps): ReactElement<ButtonProps, any>;

Defined in: react-components/Button.tsx:20

Standard Factorio push button component.

Parameters

Parameter	Type
props	ButtonProps

Returns

ReactElement<ButtonProps, any>

Example

<Button
  caption="Click Me"
  style="confirm_button"
  onClick={(ev) => log("Button clicked")}
/>

---

Camera()

function Camera(props: CameraProps): ReactElement<CameraProps, any>;

Defined in: react-components/Camera.tsx:11

World camera view element.

Parameters

Parameter	Type
props	CameraProps

Returns

ReactElement<CameraProps, any>

---

Checkbox()

function Checkbox(props: CheckboxProps): ReactElement<{
  onCheckedStateChanged: (ev: OnGuiCheckedStateChangedEvent) => void;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  state?: boolean;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "checkbox">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "checkbox">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "checkbox">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "checkbox">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "checkbox">) => void;
}, any>;

Defined in: react-components/Checkbox.tsx:27

Native Factorio checkbox component with ergonomic onChange boolean callback.

Parameters

Parameter	Type
props	CheckboxProps

Returns

ReactElement<{ onCheckedStateChanged: (ev: OnGuiCheckedStateChangedEvent) => void; anchor?: GuiAnchor; caption?: LocalisedString; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; state?: boolean; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "checkbox">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "checkbox">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "checkbox">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "checkbox">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "checkbox">) => void; }, any>

Example

<Checkbox
  caption="Enable Auto-crafting"
  state={isEnabled}
  onChange={(checked) => setIsEnabled(checked)}
/>

---

CloseButton()

function CloseButton(props: SpriteButtonProps): any;

Defined in: react-components/CloseButton.tsx:18

Standard Factorio window close action button (red cross in titlebar). Pre-configured with frame_action_button style and utility/close sprite.

Parameters

Parameter	Type
props	SpriteButtonProps

Returns

any

Example

<CloseButton onClick={() => setOpened(false)} />

---

Dropdown()

function Dropdown<T>(props: DropdownProps<T>): ReactElement<{
  items: LocalisedString[];
  selected_index: number;
  onSelectionStateChanged: (ev: OnGuiSelectionStateChangedEvent) => void;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "drop-down">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "drop-down">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "drop-down">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "drop-down">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "drop-down">) => void;
}, any>;

Defined in: react-components/Dropdown.tsx:49

Dropdown selector component supporting both key-value options and raw Factorio items.

Type Parameters

Type Parameter	Default type
T	string | number

Parameters

Parameter	Type
props	DropdownProps<T>

Returns

ReactElement<{ items: LocalisedString[]; selected_index: number; onSelectionStateChanged: (ev: OnGuiSelectionStateChangedEvent) => void; anchor?: GuiAnchor; caption?: LocalisedString; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "drop-down">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "drop-down">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "drop-down">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "drop-down">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "drop-down">) => void; }, any>

Example

<Dropdown
  options={[
    { key: "item", caption: "Items" },
    { key: "fluid", caption: "Fluids" },
  ]}
  value={selectedMode}
  onChange={(mode) => setSelectedMode(mode)}
/>

---

EmptyWidget()

function EmptyWidget(props: EmptyWidgetProps): ReactElement<EmptyWidgetProps, any>;

Defined in: react-components/EmptyWidget.tsx:18

Factorio empty-widget component. Commonly used as a flexible spacer (horizontally_stretchable: true) or titlebar drag handle (drag_target).

Parameters

Parameter	Type
props	EmptyWidgetProps

Returns

ReactElement<EmptyWidgetProps, any>

Example

// Flexible spacer in a toolbar
<EmptyWidget styles={{ horizontally_stretchable: true }} />

---

EntityPreview()

function EntityPreview(props: EntityPreviewProps): ReactElement<EntityPreviewProps, any>;

Defined in: react-components/EntityPreview.tsx:11

Entity preview element.

Parameters

Parameter	Type
props	EntityPreviewProps

Returns

ReactElement<EntityPreviewProps, any>

---

FixedWindowFrame()

function FixedWindowFrame(props: FrameProps): any;

Defined in: react-components/FixedWindowFrame.tsx:20

Non-draggable window frame container with vertical direction. Suitable for fixed HUD overlays, side panels, or embedded viewports.

Parameters

Parameter	Type
props	FrameProps

Returns

any

Example

<FixedWindowFrame style="inside_shallow_frame">
  <Label caption="Status Panel" />
</FixedWindowFrame>

---

Frame()

function Frame(props: FrameProps): ReactElement<{
  style: any;
  anchor?: GuiAnchor;
  auto_center?: boolean;
  caption?: LocalisedString;
  direction?: GuiDirection;
  drag_target?: FrameGuiElement;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "frame">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "frame">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "frame">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "frame">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "frame">) => void;
}, any>;

Defined in: react-components/Frame.tsx:18

Generic Factorio frame component.

Parameters

Parameter	Type
props	FrameProps

Returns

ReactElement<{ style: any; anchor?: GuiAnchor; auto_center?: boolean; caption?: LocalisedString; direction?: GuiDirection; drag_target?: FrameGuiElement; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "frame">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "frame">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "frame">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "frame">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "frame">) => void; }, any>

Example

<Frame style="inside_shallow_frame" direction="vertical">
  <Label caption="Section content" />
</Frame>

---

HFlow()

function HFlow(props: HFlowProps): ReactElement<{
  direction: string;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  drag_target?: FrameGuiElement;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "flow">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "flow">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "flow">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "flow">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "flow">) => void;
}, any>;

Defined in: react-components/HFlow.tsx:19

Horizontal layout flow container (direction="horizontal").

Parameters

Parameter	Type
props	HFlowProps

Returns

ReactElement<{ direction: string; anchor?: GuiAnchor; caption?: LocalisedString; drag_target?: FrameGuiElement; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "flow">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "flow">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "flow">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "flow">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "flow">) => void; }, any>

Example

<HFlow styles={{ vertical_align: "center" }}>
  <Label caption="Username:" />
  <Input text={name} onChange={setName} />
</HFlow>

---

Indicator()

function Indicator(props: IndicatorProps): any;

Defined in: react-components/Indicator.tsx:25

Small circular status indicator LED (green, red, yellow, blue, etc.).

Parameters

Parameter	Type
props	IndicatorProps

Returns

any

Example

<Indicator color={isOnline ? "green" : "red"} tooltip={isOnline ? "Online" : "Offline"} />

---

Input()

function Input(props: InputProps): ReactElement<{
  ref?: Ref<TextFieldGuiElement>;
  numeric: boolean;
  allow_negative: boolean;
  lose_focus_on_confirm: boolean;
  onTextChanged: (ev: OnGuiTextChangedEvent) => void;
  onConfirmed: (ev: OnGuiConfirmedEvent) => void;
  allow_decimal?: boolean;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  icon_selector?: boolean;
  ignored_by_interaction?: boolean;
  index?: number;
  is_password?: boolean;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  text?: string;
  tooltip?: LocalisedString;
  visible?: boolean;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "textfield">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "textfield">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "textfield">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "textfield">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "textfield">) => void;
}, any>;

Defined in: react-components/Input.tsx:56

Enhanced Factorio textfield component with numeric bounds clamping, Enter key confirmation (onConfirm), and ref focus support.

Parameters

Parameter	Type
props	InputProps

Returns

ReactElement<{ ref?: Ref<TextFieldGuiElement>; numeric: boolean; allow_negative: boolean; lose_focus_on_confirm: boolean; onTextChanged: (ev: OnGuiTextChangedEvent) => void; onConfirmed: (ev: OnGuiConfirmedEvent) => void; allow_decimal?: boolean; anchor?: GuiAnchor; caption?: LocalisedString; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; icon_selector?: boolean; ignored_by_interaction?: boolean; index?: number; is_password?: boolean; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; text?: string; tooltip?: LocalisedString; visible?: boolean; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "textfield">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "textfield">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "textfield">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "textfield">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "textfield">) => void; }, any>

Example

<Input
  numeric={true}
  allow_negative={true}
  min_value={-100}
  max_value={100}
  text={countText}
  debounceTicks={30}
  onChange={(text, ev, num) => setCount(num ?? 0)}
  onConfirm={() => saveSettings()}
/>

---

Label()

function Label(props: LabelProps): ReactElement<{
  styles: Partial<Omit<LabelStyle, LuaStyleInternalKeys>>;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  drag_target?: FrameGuiElement;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "label">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "label">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "label">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "label">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "label">) => void;
}, any>;

Defined in: react-components/Label.tsx:30

Factorio label component with built-in shortcuts for bold, large, multiline, and rich text.

Parameters

Parameter	Type
props	LabelProps

Returns

ReactElement<{ styles: Partial<Omit<LabelStyle, LuaStyleInternalKeys>>; anchor?: GuiAnchor; caption?: LocalisedString; drag_target?: FrameGuiElement; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "label">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "label">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "label">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "label">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "label">) => void; }, any>

Example

<Label
  caption="Section Title"
  bold={true}
  styles={{ font_color: { r: 1, g: 0.9, b: 0.7 } }}
/>

---

Labeled()

function Labeled(props: LabeledProps): any;

Defined in: react-components/Labeled.tsx:28

Horizontal form row layout containing a left-aligned label and right-aligned control separated by an expandable spacer.

Parameters

Parameter	Type
props	LabeledProps

Returns

any

Example

<Labeled caption="Station Priority">
  <Input numeric={true} text={priority} onChange={setPriority} />
</Labeled>

---

Line()

function Line(props: LineProps): ReactElement<LineProps, any>;

Defined in: react-components/Line.tsx:16

Visual separator line (horizontal or vertical).

Parameters

Parameter	Type
props	LineProps

Returns

ReactElement<LineProps, any>

Example

<Line direction="horizontal" />

---

Listbox()

function Listbox(props: ListboxProps): ReactElement<ListboxProps, any>;

Defined in: react-components/Listbox.tsx:20

Native Factorio list-box component.

Parameters

Parameter	Type
props	ListboxProps

Returns

ReactElement<ListboxProps, any>

Example

<Listbox
  items={["Station Alpha", "Station Beta", "Station Gamma"]}
  selected_index={selectedIndex}
  onSelectionStateChanged={(ev) => setSelectedIndex(ev.element.selected_index)}
/>

---

Minimap()

function Minimap(props: MinimapProps): ReactElement<MinimapProps, any>;

Defined in: react-components/Minimap.tsx:11

Minimap view element.

Parameters

Parameter	Type
props	MinimapProps

Returns

ReactElement<MinimapProps, any>

---

PinButton()

function PinButton(props: PinButtonProps): any;

Defined in: react-components/PinButton.tsx:24

Window pin button for titlebars. Automatically toggles between white/black pin icons and manages pinned state.

Parameters

Parameter	Type
props	PinButtonProps

Returns

any

Example

<PinButton pinned={isPinned} onTogglePin={(next) => setIsPinned(next)} />

---

ProgressBar()

function ProgressBar(props: ProgressBarProps): ReactElement<ProgressBarProps, any>;

Defined in: react-components/ProgressBar.tsx:16

Native Factorio progress bar component.

Parameters

Parameter	Type
props	ProgressBarProps

Returns

ReactElement<ProgressBarProps, any>

Example

<ProgressBar value={progressRatio} style="production_progressbar" />

---

RadioButton()

function RadioButton(props: RadioButtonProps): ReactElement<RadioButtonProps, any>;

Defined in: react-components/RadioButton.tsx:20

Native Factorio radio button component.

Parameters

Parameter	Type
props	RadioButtonProps

Returns

ReactElement<RadioButtonProps, any>

Example

<RadioButton
  caption="Option 1"
  state={selectedOption === 1}
  onCheckedStateChanged={(ev) => ev.element.state && setSelectedOption(1)}
/>

---

RadioButtons()

function RadioButtons<T>(props: RadioButtonsProps<T>): any;

Defined in: react-components/RadioButtons.tsx:49

Grouped single-selection radio button list.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
props	RadioButtonsProps<T>

Returns

any

Example

<RadioButtons
  value={selectedMode}
  buttons={[
    { key: "counts", caption: "Counts Mode" },
    { key: "stacks", caption: "Stacks Mode" },
  ]}
  onChange={(mode) => setSelectedMode(mode)}
/>

---

ScrollPane()

function ScrollPane(props: ScrollPaneProps): ReactElement<{
  style: any;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  horizontal_scroll_policy?: ScrollPolicy;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  read_only?: boolean;
  selectable?: boolean;
  tooltip?: LocalisedString;
  vertical_scroll_policy?: ScrollPolicy;
  visible?: boolean;
  word_wrap?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "scroll-pane">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "scroll-pane">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "scroll-pane">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "scroll-pane">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "scroll-pane">) => void;
}, any>;

Defined in: react-components/ScrollPane.tsx:24

Native Factorio scroll pane container. Supports scroll_pane, naked_scroll_pane, and deep_slots_scroll_pane styles.

Parameters

Parameter	Type
props	ScrollPaneProps

Returns

ReactElement<{ style: any; anchor?: GuiAnchor; caption?: LocalisedString; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; horizontal_scroll_policy?: ScrollPolicy; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; read_only?: boolean; selectable?: boolean; tooltip?: LocalisedString; vertical_scroll_policy?: ScrollPolicy; visible?: boolean; word_wrap?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "scroll-pane">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "scroll-pane">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "scroll-pane">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "scroll-pane">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "scroll-pane">) => void; }, any>

Example

<ScrollPane
  style="naked_scroll_pane"
  vertical_scroll_policy="auto"
  horizontal_scroll_policy="never"
  styles={{ maximal_height: 300, horizontally_stretchable: true }}
>
  <VFlow>{items}</VFlow>
</ScrollPane>

---

getAllGlobalGroups()

function getAllGlobalGroups(): string[];

Defined in: react-components/SectionGroup.tsx:19

Retrieves all unique logistic group names across forces in the game using the native Factorio API (LuaForce::get_logistic_groups).

Returns

string[]

---

SectionGroup()

function SectionGroup(props: SectionGroupProps): any;

Defined in: react-components/SectionGroup.tsx:107

Logistic/Combinator section group component. Features an active toggle checkbox, in-line name editing with autofocus, global logistic group presets dropdown, delete button, and a customizable slot grid.

Parameters

Parameter	Type
props	SectionGroupProps

Returns

any

Example

<SectionGroup
  name="Fuel Supply"
  active={true}
  slotCount={10}
  columnCount={10}
  slots={groupSlots}
  onActiveChange={(active) => setGroupActive(active)}
  onNameChange={(name) => setGroupName(name)}
  onSlotChange={(slotIdx, sig) => updateSlot(slotIdx, sig)}
/>

---

ShallowSection()

function ShallowSection(props: FrameProps): any;

Defined in: react-components/ShallowSection.tsx:22

Padded sub-panel styled with inside_shallow_frame_with_padding. Ideal for grouping sub-controls or dialog panels within a main window frame.

Parameters

Parameter	Type
props	FrameProps

Returns

any

Example

<ShallowSection>
  <Label caption="Network Settings" bold={true} />
  <Input text={networkMask} onChange={setNetworkMask} />
</ShallowSection>

---

Slider()

function Slider(props: SliderProps): ReactElement<{
  value: number;
  slider_value: number;
  onValueChanged: (ev: OnGuiValueChangedEvent) => void;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  discrete_values?: boolean;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  maximum_value?: number;
  minimum_value?: number;
  name?: string;
  raise_hover_events?: boolean;
  tooltip?: LocalisedString;
  value_step?: number;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "slider">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "slider">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "slider">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "slider">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "slider">) => void;
}, any>;

Defined in: react-components/Slider.tsx:33

Native Factorio slider control with ergonomic onChange(value) callback.

Parameters

Parameter	Type
props	SliderProps

Returns

ReactElement<{ value: number; slider_value: number; onValueChanged: (ev: OnGuiValueChangedEvent) => void; anchor?: GuiAnchor; caption?: LocalisedString; discrete_values?: boolean; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; maximum_value?: number; minimum_value?: number; name?: string; raise_hover_events?: boolean; tooltip?: LocalisedString; value_step?: number; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "slider">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "slider">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "slider">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "slider">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "slider">) => void; }, any>

Example

<Slider
  minimum_value={0}
  maximum_value={100}
  value={volume}
  debounceTicks={15}
  onChange={(val) => setVolume(val)}
/>

---

SlotButton()

function SlotButton(props: SlotButtonProps): ReactElement<{
  elem_type: string;
  elem_value: any;
  locked: boolean;
  elem_filters: PrototypeFilterWrite;
  style: any;
  onClick: (this: void, event: TypedEvent<OnGuiClickEvent, "choose-elem-button">) => void & (this: void, ev: OnGuiClickEvent) => void;
  onElemChanged: (ev: OnGuiElemChangedEvent) => void;
  achievement?: string;
  anchor?: GuiAnchor;
  asteroid-chunk?: string;
  caption?: LocalisedString;
  decorative?: string;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  entity?: string;
  entity-with-quality?: PrototypeWithQuality;
  equipment?: string;
  equipment-with-quality?: PrototypeWithQuality;
  fluid?: string;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  item?: string;
  item-group?: string;
  item-with-quality?: PrototypeWithQuality;
  location?: any;
  name?: string;
  raise_hover_events?: boolean;
  recipe?: string;
  recipe-with-quality?: PrototypeWithQuality;
  space-location?: string;
  technology?: string;
  tile?: string;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "choose-elem-button">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "choose-elem-button">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "choose-elem-button">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "choose-elem-button">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "choose-elem-button">) => void;
}, any>;

Defined in: react-components/SlotButton.tsx:69

Standard Factorio slot button with optional count and secondary/upper badges.

Parameters

Parameter	Type
props	SlotButtonProps

Returns

ReactElement<{ elem_type: string; elem_value: any; locked: boolean; elem_filters: PrototypeFilterWrite; style: any; onClick: (this: void, event: TypedEvent<OnGuiClickEvent, "choose-elem-button">) => void & (this: void, ev: OnGuiClickEvent) => void; onElemChanged: (ev: OnGuiElemChangedEvent) => void; achievement?: string; anchor?: GuiAnchor; asteroid-chunk?: string; caption?: LocalisedString; decorative?: string; elem_tooltip?: ElemID; enabled?: boolean; entity?: string; entity-with-quality?: PrototypeWithQuality; equipment?: string; equipment-with-quality?: PrototypeWithQuality; fluid?: string; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; item?: string; item-group?: string; item-with-quality?: PrototypeWithQuality; location?: any; name?: string; raise_hover_events?: boolean; recipe?: string; recipe-with-quality?: PrototypeWithQuality; space-location?: string; technology?: string; tile?: string; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "choose-elem-button">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "choose-elem-button">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "choose-elem-button">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "choose-elem-button">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "choose-elem-button">) => void; }, any>

Example

<SlotButton
  signal={activeSignal}
  count={1500}
  selected={isSelected}
  onChange={(sig) => setActiveSignal(sig)}
/>

---

SlotButtonTable()

function SlotButtonTable(props: TableProps): any;

Defined in: react-components/SlotButtonTable.tsx:19

Table grid layout specifically styled for holding SlotButton items.

Parameters

Parameter	Type
props	TableProps

Returns

any

Example

<SlotButtonTable column_count={10} style="slot_table">
  {slotButtons}
</SlotButtonTable>

---

Sprite()

function Sprite(props: SpriteProps): ReactElement<SpriteProps, any>;

Defined in: react-components/Sprite.tsx:16

Static sprite/icon display element.

Parameters

Parameter	Type
props	SpriteProps

Returns

ReactElement<SpriteProps, any>

Example

<Sprite sprite="item/iron-plate" />

---

SpriteButton()

function SpriteButton(props: SpriteButtonProps): ReactElement<SpriteButtonProps, any>;

Defined in: react-components/SpriteButton.tsx:21

Native Factorio sprite button component.

Parameters

Parameter	Type
props	SpriteButtonProps

Returns

ReactElement<SpriteButtonProps, any>

Example

<SpriteButton
  sprite="utility/trash"
  style="tool_button_red"
  tooltip="Delete entry"
  onClick={handleDelete}
/>

---

Switch()

function Switch(props: SwitchProps): ReactElement<{
  switch_state: any;
  onSwitchStateChanged: (ev: OnGuiSwitchStateChangedEvent) => void;
  allow_none_state?: boolean;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  left_label_caption?: LocalisedString;
  left_label_tooltip?: LocalisedString;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  right_label_caption?: LocalisedString;
  right_label_tooltip?: LocalisedString;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "switch">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "switch">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "switch">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "switch">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "switch">) => void;
}, any>;

Defined in: react-components/Switch.tsx:31

Native Factorio 2-way or 3-way toggle switch component. Supports convenient boolean and numeric value mappings.

Parameters

Parameter	Type
props	SwitchProps

Returns

ReactElement<{ switch_state: any; onSwitchStateChanged: (ev: OnGuiSwitchStateChangedEvent) => void; allow_none_state?: boolean; anchor?: GuiAnchor; caption?: LocalisedString; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; left_label_caption?: LocalisedString; left_label_tooltip?: LocalisedString; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; right_label_caption?: LocalisedString; right_label_tooltip?: LocalisedString; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "switch">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "switch">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "switch">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "switch">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "switch">) => void; }, any>

Example

<Switch
  value={isEnabled}
  left_label_caption="OFF"
  right_label_caption="ON"
  onChange={(state) => setIsEnabled(state === "right")}
/>

---

Tab()

function Tab(props: TabProps): ReactNode;

Defined in: react-components/Tab.tsx:27

Declarative Tab specification component used inside <TabbedPane>. Content is lazily rendered only when the tab is currently active.

Parameters

Parameter	Type
props	TabProps

Returns

ReactNode

Example

<Tab caption="Configuration" badge_text="3">
  <ConfigPanel />
</Tab>

---

TabbedPane()

function TabbedPane(props: TabbedPaneProps): any;

Defined in: react-components/TabbedPane.tsx:46

Native Factorio tabbed pane layout with lazy tab content mounting. Automatically builds header tab buttons and renders the active <Tab> content inside an inner frame.

Parameters

Parameter	Type
props	TabbedPaneProps

Returns

any

Example

<TabbedPane default_tab_index={1}>
  <Tab caption="General">
    <GeneralSettings />
  </Tab>
  <Tab caption="Advanced">
    <AdvancedSettings />
  </Tab>
</TabbedPane>

---

Table()

function Table(props: TableProps): ReactElement<TableProps, any>;

Defined in: react-components/Table.tsx:19

Grid layout table container (column_count determines the number of columns).

Parameters

Parameter	Type
props	TableProps

Returns

ReactElement<TableProps, any>

Example

<Table column_count={4}>
  <SlotButton slot={1} />
  <SlotButton slot={2} />
</Table>

---

Titlebar()

function Titlebar(props: TitlebarProps): any;

Defined in: react-components/Titlebar.tsx:45

Standard Factorio window titlebar header. Features title label with frame_title style, draggable handle area, custom action buttons, and a close button.

Parameters

Parameter	Type
props	TitlebarProps

Returns

any

Example

<Titlebar
  caption="Combinator GUI"
  drag_target={frameRef.current}
  onClose={() => setOpened(false)}
/>

---

VFlow()

function VFlow(props: VFlowProps): ReactElement<{
  direction: string;
  anchor?: GuiAnchor;
  caption?: LocalisedString;
  drag_target?: FrameGuiElement;
  elem_tooltip?: ElemID;
  enabled?: boolean;
  game_controller_interaction?: game_controller_interaction;
  ignored_by_interaction?: boolean;
  index?: number;
  location?: any;
  locked?: boolean;
  name?: string;
  raise_hover_events?: boolean;
  tooltip?: LocalisedString;
  visible?: boolean;
  ref?: Ref<any>;
  children?:   | ReactNode
     | ReactNode[];
  styles?: StylesFor<E>;
  style?: any;
  onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "flow">) => void;
  onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "flow">) => void;
  onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "flow">) => void;
  onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "flow">) => void;
  onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "flow">) => void;
}, any>;

Defined in: react-components/VFlow.tsx:19

Vertical layout flow container (direction="vertical").

Parameters

Parameter	Type
props	VFlowProps

Returns

ReactElement<{ direction: string; anchor?: GuiAnchor; caption?: LocalisedString; drag_target?: FrameGuiElement; elem_tooltip?: ElemID; enabled?: boolean; game_controller_interaction?: game_controller_interaction; ignored_by_interaction?: boolean; index?: number; location?: any; locked?: boolean; name?: string; raise_hover_events?: boolean; tooltip?: LocalisedString; visible?: boolean; ref?: Ref<any>; children?: | ReactNode | ReactNode[]; styles?: StylesFor<E>; style?: any; onClosed?: (this: void, event: TypedEvent<OnGuiClosedEvent, "flow">) => void; onHover?: (this: void, event: TypedEvent<OnGuiHoverEvent, "flow">) => void; onLeave?: (this: void, event: TypedEvent<OnGuiLeaveEvent, "flow">) => void; onLocationChanged?: (this: void, event: TypedEvent<OnGuiLocationChangedEvent, "flow">) => void; onOpened?: (this: void, event: TypedEvent<OnGuiOpenedEvent, "flow">) => void; }, any>

Example

<VFlow styles={{ horizontally_stretchable: true }}>
  <Label caption="Title" style="bold_label" />
  <Label caption="Description text..." />
</VFlow>

---

WellFold()

function WellFold(props: WellFoldProps): any;

Defined in: react-components/WellFold.tsx:26

Collapsible well section with an expand/collapse toggle button in the header.

Parameters

Parameter	Type
props	WellFoldProps

Returns

any

Example

<WellFold caption="Advanced Options" defaultCollapsed={true}>
  <Label caption="Detailed settings..." />
</WellFold>

---

WellHeader()

function WellHeader(props: WellHeaderProps): any;

Defined in: react-components/WellHeader.tsx:24

Subheader bar styled with subheader_frame and subheader_caption_label.

Parameters

Parameter	Type
props	WellHeaderProps

Returns

any

Example

<WellHeader caption="Section Title">
  <Button caption="Actions" style="mini_button" />
</WellHeader>

---

WellSection()

function WellSection(props: WellSectionProps): any;

Defined in: react-components/WellSection.tsx:30

Grouped content section with a styled subheader bar and padded body flow.

Parameters

Parameter	Type
props	WellSectionProps

Returns

any

Example

<WellSection caption="Signal Filters">
  <SlotButtonTable column_count={5}>{slots}</SlotButtonTable>
</WellSection>

---

WindowFrame()

function WindowFrame(props: WindowFrameProps): any;

Defined in: react-components/WindowFrame.tsx:68

Standard Factorio draggable window frame. Integrates useWindow for automatic position memory across sessions, pinning behavior, auto-centering, and titlebar controls.

Parameters

Parameter	Type
props	WindowFrameProps

Returns

any

Example

<WindowFrame
  caption="My Mod Window"
  playerIndex={playerIndex}
  pinnable={true}
  styles={{ width: 440 }}
  onClose={() => setOpened(false)}
>
  <TabbedPane>...</TabbedPane>
</WindowFrame>