Using Views components
The simplest way to build a custom component is to assemble it from built-in
Views components. Building such a component is helpful if you plan
on reusing the same set of Views components in multiple places.
In the following example, we create an
AnimalSearch
component, which calls an Airplane task to
search for animals. The output of the search results is then displayed in a table.tsxCopied1import { Button, Card, Select, Stack, Table, Title, useComponentState } from "@airplane/views";23/** AnimalViewer is a view that uses the custom component AnimalSearch */4const AnimalViewer = () => {5const search = useComponentState("searchAnimalsButton");67const output = search.result?.output;8const error = search.result?.error;910return (11<Stack>12<Title>Animals</Title>13<AnimalSearch />14{output && !error && <Table showFilter={false} defaultPageSize={3} data={output} />}15</Stack>16);17};1819/** 🌟 AnimalSearch is a custom search component built from views components */20const AnimalSearch = () => {21const animalSelect = useComponentState();2223return (24<Card>25<Stack direction="row" align="end">26<Select27id={animalSelect.id}28label="Search for an animal (but actually you can only search for cats 🐱)"29placeholder="Select an animal"30data={[{ value: "cat", label: "Cat" }]}31/>32<Button33id="searchAnimalsButton"34task={{35slug: "search_animals",36params: { animal: animalSelect.value },37}}38disabled={!animalSelect.value}39>40Search41</Button>42</Stack>43</Card>44);45};4647export default AnimalViewer;
Up next
Up next
You can incorporate external libraries in your view or custom component.