Skip to main content
GtkStackPage represents a single page within a GtkStack container. It extends GtkBox, providing the same layout capabilities while serving as a stack page.

​
Props

GtkStackPage inherits all props from GtkBox, including:
​
name
string
The unique identifier for this stack page. Used to navigate to this page via GtkStack.visibleChildName.Important: Always set a name to enable programmatic navigation.
​
orientation
GtkOrientation
The box’s orientation - either GtkOrientation.HORIZONTAL or GtkOrientation.VERTICAL.Default: GtkOrientation.HORIZONTAL
​
spacing
number
The amount of space in pixels between children.Default: 0
​
homogeneous
boolean
Whether all children should be allocated the same size.Default: false
​
children
ReactNode
The child widgets to display in this page.

​
Inherited Props

GtkStackPage extends GtkBox, which extends GtkWidget, inheriting all layout, styling, and event handling properties.

​
Usage

​
Basic Stack Page

import { 
  GtkStack, 
  GtkStackPage, 
  GtkLabel,
  GtkOrientation,
  GtkAlign 
} from 'react-gtk-renderer';

function MyStack() {
  return (
    <GtkStack>
      <GtkStackPage 
        name="page1"
        orientation={GtkOrientation.VERTICAL}
        spacing={20}
        valign={GtkAlign.CENTER}
        halign={GtkAlign.CENTER}
      >
        <GtkLabel label="Welcome to Page 1" />
      </GtkStackPage>
    </GtkStack>
  );
}

​
Multiple Pages with Navigation

import { 
  GtkStack, 
  GtkStackPage, 
  GtkStackImpl,
  GtkButton, 
  GtkLabel,
  GtkBox,
  GtkOrientation,
  GtkAlign 
} from 'react-gtk-renderer';
import { useRef } from 'react';

function MultiPageApp() {
  const stackRef = useRef<GtkStackImpl>();
  
  return (
    <GtkStack ref={stackRef}>
      <GtkStackPage 
        name="firstPage"
        marginStart={25}
        marginEnd={25}
        spacing={25}
        valign={GtkAlign.CENTER}
        halign={GtkAlign.CENTER}
        orientation={GtkOrientation.VERTICAL}
      >
        <GtkLabel label="First Page" />
        <GtkButton 
          label="Go to Second Page"
          onClicked={() => {
            stackRef.current.visibleChildName = 'secondPage';
          }}
        />
      </GtkStackPage>
      
      <GtkStackPage 
        name="secondPage"
        marginStart={25}
        marginEnd={25}
        spacing={25}
        valign={GtkAlign.CENTER}
        halign={GtkAlign.CENTER}
        orientation={GtkOrientation.VERTICAL}
      >
        <GtkLabel label="Second Page" />
        <GtkButton 
          label="Go Back"
          onClicked={() => {
            stackRef.current.visibleChildName = 'firstPage';
          }}
        />
      </GtkStackPage>
    </GtkStack>
  );
}

​
Centered Content Page

import { GtkStackPage, GtkLabel, GtkOrientation, GtkAlign } from 'react-gtk-renderer';

function CenteredPage() {
  return (
    <GtkStackPage
      name="centered"
      orientation={GtkOrientation.VERTICAL}
      valign={GtkAlign.CENTER}
      halign={GtkAlign.CENTER}
      spacing={20}
    >
      <GtkLabel label="This content is centered" />
      <GtkButton label="Click Me" />
    </GtkStackPage>
  );
}

​
Form Page with Layout

import { GtkStackPage, GtkLabel, GtkEntry, GtkButton, GtkOrientation } from 'react-gtk-renderer';

function FormPage() {
  return (
    <GtkStackPage
      name="form"
      orientation={GtkOrientation.VERTICAL}
      spacing={15}
      marginStart={30}
      marginEnd={30}
      marginTop={30}
      marginBottom={30}
    >
      <GtkLabel label="Enter Your Information" />
      <GtkEntry placeholderText="Name" />
      <GtkEntry placeholderText="Email" />
      <GtkButton label="Submit" />
    </GtkStackPage>
  );
}

​
Horizontal Layout Page

import { GtkStackPage, GtkButton, GtkOrientation, GtkAlign } from 'react-gtk-renderer';

function HorizontalPage() {
  return (
    <GtkStackPage
      name="horizontal"
      orientation={GtkOrientation.HORIZONTAL}
      spacing={10}
      valign={GtkAlign.CENTER}
      halign={GtkAlign.CENTER}
    >
      <GtkButton label="Option 1" />
      <GtkButton label="Option 2" />
      <GtkButton label="Option 3" />
    </GtkStackPage>
  );
}

​
Common Patterns

​
Page with Margins

Apply consistent margins to all pages: 
<GtkStackPage
  name="page"
  marginStart={25}
  marginEnd={25}
  marginTop={25}
  marginBottom={25}
  orientation={GtkOrientation.VERTICAL}
  spacing={15}
>
  {/* Page content */}
</GtkStackPage>

​
Reusable Page Component

Create reusable page components: 
import { GtkStackPage, GtkOrientation, GtkAlign } from 'react-gtk-renderer';
import { ReactNode } from 'react';

interface PageProps {
  name: string;
  children: ReactNode;
}

function StandardPage({ name, children }: PageProps) {
  return (
    <GtkStackPage
      name={name}
      orientation={GtkOrientation.VERTICAL}
      spacing={20}
      marginStart={25}
      marginEnd={25}
      valign={GtkAlign.CENTER}
      halign={GtkAlign.CENTER}
    >
      {children}
    </GtkStackPage>
  );
}

// Usage
<GtkStack>
  <StandardPage name="home">
    <GtkLabel label="Home Content" />
  </StandardPage>
  <StandardPage name="about">
    <GtkLabel label="About Content" />
  </StandardPage>
</GtkStack>

​
Notes

GtkStackPage must be a direct child of GtkStack. It cannot be used outside of a stack context.
Always provide a name prop to enable programmatic navigation using GtkStack.visibleChildName.
Since GtkStackPage extends GtkBox, it inherits all box layout capabilities. Use orientation, spacing, and alignment props to control the page layout.