Window

Window is the feature-rich window component in Kitten.

Kitten components including Window are React-ish and follow React’s declarative programming model; so you can easily create and manage windows in your application.

Everything is a state in Kitten, so Window is a stateful component that you can control with props.

Let’s make a custom window component with Window.

We’ll work on the MyWindow.tsx file for this.

Note Window and BasicWindow components can be placed in anywhere in the component tree. They don’t need to be direct children of the Space component. You can also have nested Window components.

Custom Window Component

function MyWindow() {
  const [id] = useKittenId()
  const [position, setPosition] = usePosition([100, 50])
  const [size, setSize] = useSize([400, 300])
  const [opened, setOpened] = useState(true)
  const [staged, setStaged] = useState(false)

  return opened ? <Window
    kittenId={id}
    position={position}
    size={size}
    staged={staged}
    onStagedChange={setStaged}
    onPositionChange={setPosition}
    onSizeChange={setSize}
  >
    <TitleBar onMove={setPosition}>
        <Buttons>
          <CloseButton onClick={() => setOpened(false)} />
          <StageButton onClick={() => setStaged(!staged)} />
        </Buttons>
        <Title>Hello Kitty 🐈</Title>
    </TitleBar>
    <Content>
      <div style={{ padding: 25 }}>
        <p>A cat is a small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.</p>
      </div>
    </Content>
  </Window>: null
}

MyWindow is a custom window component that uses Window and its sub-components like TitleBar, Buttons, CloseButton, StageButton, Title, and Content.

Window takes props like kittenId, position, size, staged, and children node, so you don’t need to deal with state management for simple use cases.

Important: kittenId prop is a unique identifier for the window. It is required for the window to work properly.

kittenId Prop

kittenId is a unique identifier for the window. It is required for the window to work properly.

You can use the useKittenId hook to set the kittenId.

Define the id state with the useKittenId hook:

const [id] = useKittenId()

Then, pass the id state to the kittenId prop:

<Window kittenId={id} ... />

Congratulations! 🥳 You’ve created a custom window component with Window.

API Reference

Window Props

Hooks for Window

Kitten provides hooks for setting the window’s properties.

useKittenId()

useKittenId is a hook for setting the unique identifier for the window.

const [id] = useKittenId()

usePosition(initial_position: [number, number] | 'random' | 'auto')

usePosition is a hook for setting the initial position of the window.

const [position, setPosition] = usePosition([100, 50])

If you set the position to 'random', the window will be placed randomly on the screen.

const [position, setPosition] = usePosition('random')

If you set the position to 'auto', the window will be placed automatically on the screen.

const [position, setPosition] = usePosition('auto')

Automatically placed windows are positioned in a cascading manner.

useSize(initial_size: [number, number])

useSize is a hook for setting the initial size of the window.

const [size, setSize] = useSize([400, 300])