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.
tsx
Copied
1
import { Button, Card, Select, Stack, Table, Title, useComponentState } from "@airplane/views";
2
3
/** AnimalViewer is a view that uses the custom component AnimalSearch */
4
const AnimalViewer = () => {
5
const search = useComponentState("searchAnimalsButton");
6
7
const output = search.result?.output;
8
const error = search.result?.error;
9
10
return (
11
<Stack>
12
<Title>Animals</Title>
13
<AnimalSearch />
14
{output && !error && <Table showFilter={false} defaultPageSize={3} data={output} />}
15
</Stack>
16
);
17
};
18
19
/** 🌟 AnimalSearch is a custom search component built from views components */
20
const AnimalSearch = () => {
21
const animalSelect = useComponentState();
22
23
return (
24
<Card>
25
<Stack direction="row" align="end">
26
<Select
27
id={animalSelect.id}
28
label="Search for an animal (but actually you can only search for cats 🐱)"
29
placeholder="Select an animal"
30
data={[{ value: "cat", label: "Cat" }]}
31
/>
32
<Button
33
id="searchAnimalsButton"
34
task={{
35
slug: "search_animals",
36
params: { animal: animalSelect.value },
37
}}
38
disabled={!animalSelect.value}
39
>
40
Search
41
</Button>
42
</Stack>
43
</Card>
44
);
45
};
46
47
export default AnimalViewer;

Up next

You can incorporate external libraries in your view or custom component.