Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/devhammed/react-gtk/llms.txt

Use this file to discover all available pages before exploring further.

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.

Build docs developers (and LLMs) love

Get started for freeTalk to us