Components

Import components from supernode/widget. They only accept the props and values Glance can render, so unsupported usage fails at type-check time. Every component accepts a modifier for layout and decoration. Colors and alignments are described in View.

import { Column, Modifier, Text } from "supernode/widget";

TextField, Hooks and Context are not available in widgets; use an App page for input and state.

Text

Displays text.

<Text fontSize={16} fontWeight="bold" fontStyle="italic" color="#057AF6">
  Hello SuperNode
</Text>

Prop	Type	Description
`children`	`string` or expression	Text content.
`fontSize`	`number`	Font size in sp. Defaults to `14`.
`fontWeight`	`"normal"` \| `"medium"` \| `"bold"`	Font weight. Defaults to `"normal"`.
`fontStyle`	`"normal"` \| `"italic"`	Font style. Defaults to `"normal"`.
`color`	`string` \| `{ light, dark }`	Text color: a hex color, or separate colors per theme. See Color values.

Glance renders only the normal (400), medium (500) and bold (700) weights of Compose FontWeight.

DateText

DateText displays a JavaScript Date in a native date format.

<DateText date={new Date()} format="time" prefix="Updated " color="#777777" />

Prop	Type	Description
`date`	`Date`	Point in time to display. An invalid `Date` throws an error.
`format`	`"date"` \| `"time"`	Displays a fixed calendar date or a fixed clock time.
`prefix`	`string`	Static text before the date.
`suffix`	`string`	Static text after the date.
`fontSize`	`number`	Font size in sp. Defaults to `14`.
`fontWeight`	`"normal"` \| `"medium"` \| `"bold"`	Font weight. Defaults to `"normal"`.
`fontStyle`	`"normal"` \| `"italic"`	Font style. Defaults to `"normal"`.
`color`	`string` \| `{ light, dark }`	Text color: a hex color, or separate colors per theme.

prefix, the date, and suffix form one text view and share the same font, color, and wrapping behavior. The date is formatted with the device locale and time zone when the widget renders and stays fixed until the next refresh, so live formats such as relative time and timers are not available. Set options.refresh to update it.

Image

<Image src="home_smile_solid" contentScale="crop" modifier={Modifier.size(48)} />

Prop	Type	Description
`src`	`string`	HTTP(S) URL, image Data URL, relative or absolute path, `file:` URL, or PikaIcons asset name. Relative paths resolve against the script working directory.
`contentScale`	`"fit"` \| `"crop"` \| `"fillBounds"`	How the image is scaled into its bounds. Defaults to `"fit"`.

`contentScale`	Behavior
`"fit"`	Scales uniformly so the whole image fits inside the bounds.
`"crop"`	Scales uniformly to fill the bounds, cropping the overflow.
`"fillBounds"`	Stretches to fill the bounds without keeping the aspect ratio.

Invalid responses, image data, and asset names fail with an explicit error.

Spacer

Occupies empty space of the size set by its modifier. Like Compose Spacer, it is 0 × 0 when no size is set and does not stretch on its own; give it defaultWeight() to fill the remaining space of a Row or Column.

<Row>
  <Text>Left</Text>
  <Spacer modifier={Modifier.width(16)} />
  <Text>Right</Text>
</Row>

HorizontalDivider and VerticalDivider

Render a thin separator line. HorizontalDivider fills the available width; VerticalDivider fills the available height. Both also accept modifier.

<Column>
  <Text>Above</Text>
  <HorizontalDivider color="#FF0000" thickness={2} />
  <Row modifier={Modifier.height(24)}>
    <Text>Left</Text>
    <VerticalDivider />
    <Text>Right</Text>
  </Row>
</Column>

Prop	Type	Description
`color`	`string` \| `{ light, dark }`	Line color: a hex color, or separate colors per theme. Defaults to the theme divider color. See Color values.
`thickness`	`number`	Line thickness in dp. Defaults to `1`.

Layouts

Each Column, Row and Box holds up to 10 children after arrays and fragments are flattened, because Glance renders no more.

Column

Stacks children vertically. Also accepts modifier.

<Column horizontalAlignment="center" spacing={4} modifier={Modifier.padding(12)}>
  <Text>Title</Text>
  <Text>Subtitle</Text>
</Column>

Prop	Type	Description
`horizontalAlignment`	`"start"` \| `"center"` \| `"end"`	Horizontal alignment of children. Defaults to `"start"`.
`spacing`	`number`	Space between children in dp, like `Arrangement.spacedBy`. Defaults to `0`.

Row

Stacks children horizontally. Also accepts modifier.

<Row verticalAlignment="center" spacing={8} modifier={Modifier.padding(12)}>
  <Text>Left</Text>
  <Text>Right</Text>
</Row>

Prop	Type	Description
`verticalAlignment`	`"top"` \| `"center"` \| `"bottom"`	Vertical alignment of children. Defaults to `"top"`.
`spacing`	`number`	Space between children in dp, like `Arrangement.spacedBy`. Defaults to `0`.

Box

Stacks children on top of each other. Also accepts modifier.

<Box contentAlignment="bottomEnd" modifier={Modifier.padding(12)}>
  <Text>Title</Text>
</Box>

Prop	Type	Description
`contentAlignment`	`ContentAlignment`	Where children are placed. Defaults to `"topStart"`. See Alignment values.

Example: profile layout

<Row verticalAlignment="center" spacing={12} modifier={Modifier.padding(16)}>
  <Image
    src={profile.avatar}
    contentScale="crop"
    modifier={Modifier.size(64).cornerRadius(32)}
  />
  <Column spacing={4}>
    <Text fontSize={16} fontWeight="bold">{profile.nickname}</Text>
    <Text color="#777777">@{profile.id}</Text>
    <Row spacing={12}>
      <Text>{profile.followers} followers</Text>
      <Text>{profile.following} following</Text>
    </Row>
  </Column>
</Row>

On this page