Skip to main content
Version: 0.11

Namespace: Blocks

Devvit.Blocks

Table of contents​

Interfaces​

Type Aliases​

Type Aliases​

ActionHandlers​

Ƭ ActionHandlers: keyof Actionable & WebViewActionable

Actionable​

Ƭ Actionable: Object

Type declaration​

NameType
onPress?OnPressEventHandler

Alignment​

Ƭ Alignment: `${VerticalAlignment}` | `${HorizontalAlignment}` | `${VerticalAlignment} ${HorizontalAlignment}` | `${HorizontalAlignment} ${VerticalAlignment}`

AvatarBackground​

Ƭ AvatarBackground: "light" | "dark"

AvatarFacing​

Ƭ AvatarFacing: "left" | "right"

AvatarProps​

Ƭ AvatarProps: BaseProps & Actionable & { background?: AvatarBackground ; facing?: AvatarFacing ; size?: AvatarSize ; thingId: string }

AvatarSize​

Ƭ AvatarSize: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge"

BaseProps​

Ƭ BaseProps: Object

Type declaration​

NameTypeDescription
grow?boolean-
height?SizeString-
id?stringThis optional field provides a unique identifier for the element. This is useful for ensuring re-use of elements across renders. See the key field for more information. Unlike key, id is global. You cannot have two elements with the same id in the same tree.
key?stringThis optional field provides some efficiencies around re-ordering elements in a list. Rather Than re-rendering the entire list, the client can use the key to determine if the element has changed. In the example below, if a and b were swapped, the client would know to reuse the existing elements from b, rather than re-creating an expensive tree of elements. Unlike id, key is local to the parent element. This means that the same key can be used in different parts of the tree without conflict. hi world ...deeply nested content...
maxHeight?SizeString-
maxWidth?SizeString-
minHeight?SizeString-
minWidth?SizeString-
width?SizeString-

ButtonAppearance​

Ƭ ButtonAppearance: "secondary" | "primary" | "plain" | "bordered" | "media" | "destructive" | "caution" | "success"

ButtonProps​

Ƭ ButtonProps: BaseProps & HasStringChildren & Actionable & { appearance?: ButtonAppearance ; darkTextColor?: ColorString ; disabled?: boolean ; icon?: IconName ; lightTextColor?: ColorString ; size?: ButtonSize ; textColor?: ColorString }

ButtonSize​

Ƭ ButtonSize: "small" | "medium" | "large"

Affects the button height. small = 32px; medium = 40px; large = 48px;

ColorString​

Ƭ ColorString: string

ContainerBorderWidth​

Ƭ ContainerBorderWidth: Thickness

thin = 1px; thick = 2px;

ContainerCornerRadius​

Ƭ ContainerCornerRadius: "none" | "small" | "medium" | "large" | "full"

small = 8px; medium = 16px; large = 24px;

ContainerGap​

Ƭ ContainerGap: "none" | "small" | "medium" | "large"

small = 8px; medium = 16px; large = 32px;

ContainerPadding​

Ƭ ContainerPadding: "none" | "xsmall" | "small" | "medium" | "large"

xsmall = 4px; small = 8px; medium = 16px; large = 32px;

HasElementChildren​

Ƭ HasElementChildren: Object

Type declaration​

NameType
children?ElementChildren

HasStringChildren​

Ƭ HasStringChildren: Object

Type declaration​

NameType
children?StringChildren

HorizontalAlignment​

Ƭ HorizontalAlignment: "start" | "center" | "end"

IconProps​

Ƭ IconProps: BaseProps & HasStringChildren & Actionable & { color?: ColorString ; darkColor?: ColorString ; lightColor?: ColorString ; name: IconName ; size?: IconSize }

IconSize​

Ƭ IconSize: "xsmall" | "small" | "medium" | "large"

xsmall = 12px; small = 16px; medium = 20px; large = 24px;

ImageProps​

Ƭ ImageProps: BaseProps & Actionable & { description?: string ; imageHeight: SizePixels | number ; imageWidth: SizePixels | number ; resizeMode?: ImageResizeMode ; url: string }

ImageResizeMode​

Ƭ ImageResizeMode: "none" | "fit" | "fill" | "cover" | "scale-down"

IntrinsicElementsType​

Ƭ IntrinsicElementsType: keyof IntrinsicElements

OnPressEventHandler​

Ƭ OnPressEventHandler: (data: JSONObject) => void | Promise<void>

Type declaration​

▸ (data): void | Promise<void>

Parameters​
NameType
dataJSONObject
Returns​

void | Promise<void>

OnWebViewEventHandler​

Ƭ OnWebViewEventHandler: <T>(message: T) => void | Promise<void>

Type declaration​

▸ <T>(message): void | Promise<void>

Type parameters​
NameType
Textends JSONValue
Parameters​
NameType
messageT
Returns​

void | Promise<void>

RootHeight​

Ƭ RootHeight: "regular" | "tall"

RootProps​

Ƭ RootProps: HasElementChildren & { height?: RootHeight }

SizePercent​

Ƭ SizePercent: `${number}%`

SizePixels​

Ƭ SizePixels: `${number}px`

SizeString​

Ƭ SizeString: SizePixels | SizePercent | number

SpacerProps​

Ƭ SpacerProps: BaseProps & { shape?: SpacerShape ; size?: SpacerSize }

SpacerShape​

Ƭ SpacerShape: "invisible" | "thin" | "square"

SpacerSize​

Ƭ SpacerSize: "xsmall" | "small" | "medium" | "large"

xsmall = 4px; small = 8px; medium = 16px; large = 32px;

StackProps​

Ƭ StackProps: BaseProps & HasElementChildren & Actionable & { alignment?: Alignment ; backgroundColor?: ColorString ; border?: ContainerBorderWidth ; borderColor?: ColorString ; cornerRadius?: ContainerCornerRadius ; darkBackgroundColor?: ColorString ; darkBorderColor?: ColorString ; gap?: ContainerGap ; lightBackgroundColor?: ColorString ; lightBorderColor?: ColorString ; padding?: ContainerPadding ; reverse?: boolean }

TextOutline​

Ƭ TextOutline: Thickness

thin = 1px; thick = 2px;

TextOverflow​

Ƭ TextOverflow: "clip" | "ellipsis"

TextProps​

Ƭ TextProps: BaseProps & HasStringChildren & Actionable & { alignment?: Alignment ; color?: ColorString ; darkColor?: ColorString ; lightColor?: ColorString ; outline?: TextOutline ; overflow?: TextOverflow ; selectable?: boolean ; size?: TextSize ; style?: TextStyle ; weight?: TextWeight ; wrap?: boolean }

TextSize​

Ƭ TextSize: "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"

xsmall = 10px; small = 12px; medium = 14px; large = 16px; xlarge = 18px; xxlarge = 24px;

TextStyle​

Ƭ TextStyle: "body" | "metadata" | "heading"

TextWeight​

Ƭ TextWeight: "regular" | "bold"

Thickness​

Ƭ Thickness: "none" | "thin" | "thick"

VerticalAlignment​

Ƭ VerticalAlignment: "top" | "middle" | "bottom"

WebViewActionable​

Ƭ WebViewActionable: Object

Type declaration​

NameType
onMessage?OnWebViewEventHandler

WebViewProps​

Ƭ WebViewProps: BaseProps & WebViewActionable & { state?: JSONObject ; url: string }

  • Table of contents
  • Type Aliases
    • ActionHandlers
    • Actionable
    • Alignment
    • AvatarBackground
    • AvatarFacing
    • AvatarProps
    • AvatarSize
    • BaseProps
    • ButtonAppearance
    • ButtonProps
    • ButtonSize
    • ColorString
    • ContainerBorderWidth
    • ContainerCornerRadius
    • ContainerGap
    • ContainerPadding
    • HasElementChildren
    • HasStringChildren
    • HorizontalAlignment
    • IconProps
    • IconSize
    • ImageProps
    • ImageResizeMode
    • IntrinsicElementsType
    • OnPressEventHandler
    • OnWebViewEventHandler
    • RootHeight
    • RootProps
    • SizePercent
    • SizePixels
    • SizeString
    • SpacerProps
    • SpacerShape
    • SpacerSize
    • StackProps
    • TextOutline
    • TextOverflow
    • TextProps
    • TextSize
    • TextStyle
    • TextWeight
    • Thickness
    • VerticalAlignment
    • WebViewActionable
    • WebViewProps