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
, anduseKittenId
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 thefetch
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﹥.
Files
Preparing Environment
- Installing dependencies
- Starting http server