Let’s make a Cat List App

In this tutorial, you will learn how to build a simple Cat List App with React﹤Kitten﹥.

Create a new React﹤Kitten﹥ project

First, create a new React﹤Kitten﹥ project by running the following command:

npm create vite my-cat-list-app -- --template react-ts

Install React﹤Kitten﹥

Next, install React﹤Kitten﹥ by running the following command:

npm install react-kitten

Create a Cat List component

Create a new file named CatList.tsx in the src directory with the following content:

import React, { useState, useEffect } from 'react'

import {
  Window, BasicWindow, TitleBar, Title, Buttons, CloseButton,
  StageButton, Content, usePosition, useSize, useKittenId
} from 'react-kitten'

function ListWindow({ title }: React.PropsWithChildren & { title?: string }) {
  const [kittenId,] = useKittenId()
  const [position, setPosition] = usePosition([20, 20])
  const [opened, setOpened] = useState(true)
  const [size, setSize] = useSize([500, 400])
  const [staged, setStaged] = useState(false)

  const [openedCats, setOpenedCats] = useState<string[]>([])
  const [cats, setCats] = useState<string[]>([])

  useEffect(() => {
    fetch(`https://blanch.dev/catphotos/cats.php?count=10`)
      .then(res => res.json())
      .then(data => setCats(data["urls"].map((cat: { url: string }) => cat.url)))
  }, [])

  return <>
    {opened ? <Window
      kittenId={kittenId}
      position={position} onPositionChange={setPosition}
      size={size} onSizeChange={setSize}
      staged={staged} onStagedChange={setStaged}
    >
      <TitleBar onMove={setPosition}>
        <Buttons>
          <CloseButton onClick={() => setOpened(false)} />
          <StageButton onClick={() => setStaged(!staged)} />
        </Buttons>
        <Title>{title}</Title>
      </TitleBar>
      <Content>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
          gap: 10,
          padding: 10,
          height: '100%'
        }}>
          {cats.map((cat, i) =>
            <img
              key={i} src={cat} alt="Cat"
              crossOrigin="anonymous"
              style={{
                width: '100%',
                height: 'auto',
                marginBottom: 10,
              }}
              onClick={() => setOpenedCats([...openedCats, cat])}
            />
          )}
        </div>
      </Content>
    </Window>: <div style={{margin: 10}}>
      <button onClick={() => setOpened(true)}>
        Open Cat List
      </button>
    </div>}
    {openedCats.map((cat, i) => <BasicWindow key={i} title="Cat" initialSize={[400, 300]}>
      <img src={cat} alt="cat" style={{ width: '100%', height: 'auto' }} crossOrigin="anonymous" />
    </BasicWindow>)}
  </>
}

export { ListWindow }

What’s happening here?

The ListWindow component is a functional component that displays a list of cat images.
We use usePosition, useSize, and useKittenId hooks to manage the window’s position, size, and Kitten ID.
We fetch a list of cat images from the https://blanch.dev/catphotos/cats.php?count=10 API using the fetch function.
When a cat image is clicked, it opens a new BasicWindow with the cat image.
We’ve used BasicWindow to show a simple window that displays an image of a cat.

Use the Cat List component in your App

Now, you can use the ListWindow component in your App.tsx file:

import { useState } from 'react';
import { Manager, Spaces, Space } from 'react-kitten';

import { ListWindow } from './CatList';

import './App.css';

function App() {
  const [size] = useState<[number, number]>([
    window.innerWidth,
    window.innerHeight,
  ]);
  const [space, setSpace] = useState(0);

  return (
    <Manager size={size}>
      <Spaces space={space} onSpaceChange={setSpace}>
        <Space>
          <ListWindow title="Cats and Kittens" />
        </Space>
      </Spaces>
    </Manager>
  );
}

export default App;

Congratulations 🥳

You have successfully built a Cat List App with React﹤Kitten﹥.

Adjustable Window

Files

Preparing Environment

Installing dependencies
Starting http server