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.
Using 3rd party libraries
PrivacyTermsSupport