Skip to main content

Types

These are the utility types used and provided by Aether.

Side​

The side of a placement.

type Side = "top" | "left" | "bottom" | "right"

Alignment​

The alignment of a placement.

type Alignment = "start" | "end"

Placement​

A placement value.

type Placement =
    | Side
    | "top-start"
    | "top-end"
    | "bottom-start"
    | "bottom-end"
    | "left-start"
    | "left-end"
    | "right-start"
    | "right-end"
note

You aren't limited to just these 12 placements. offset() allows you to create any placement.

SideObject​

Used for representing different Side values.

type SideObject = {
    top: number,
    bottom: number,
    left: number,
    right: number,
}

Rect​

An object containing a rectangular area.

type Rect = {
    x: number,
    y: number,
    width: number,
    height: number,
}

BoundingRect​

A Rect containing SideObject values.

type BoundingRect = {
    x: number,
    y: number,
    width: number,
    height: number,
    top: number,
    bottom: number,
    left: number,
    right: number,
}

ElementRects​

Contains the Rect values for the reference and target (floating) element.

Padding​

Represents a value used for padding element sides. A single number applies the same padding to all sides, while a SideObject enables customization of padding for each side individually.

type Padding = number | {
    top: number?,
    bottom: number?,
    left: number?,
    right: number?,
}