@tairu/renderer

Renderer for tiles implementing the Tairu protocol.

Installation

npm install @tairu/renderer

Classes

Renderer<ElementType>

Extended by

• ReactNativeRenderer

Type Parameters

• ElementType

Constructors

new Renderer()

new Renderer<ElementType>(): Renderer<ElementType>

Returns

Renderer<ElementType>

Methods

createBox()

createBox(props, children): ElementType

Parameters

props

props.children

({props: object;type: "Box" | "Image" | "Text"; } | object[])[]

props.key

string

props.style

object

props.style.alignItems

"flex-start" | "center" | "flex-end"

props.style.alignSelf

"flex-start" | "center" | "flex-end" | "auto"

props.style.backgroundClip

"text" | "border-box"

props.style.backgroundColor

string

props.style.backgroundImage

string

props.style.backgroundPosition

string

props.style.backgroundRepeat

"repeat" | "repeat-x" | "repeat-y" | "no-repeat"

props.style.backgroundSize

string

props.style.borderBottomColor

string

props.style.borderBottomLeftRadius

number

props.style.borderBottomRightRadius

number

props.style.borderBottomStyle

"solid" | "dashed"

props.style.borderBottomWidth

number

props.style.borderColor

string

props.style.borderLeftColor

string

props.style.borderLeftStyle

"solid" | "dashed"

props.style.borderLeftWidth

number

props.style.borderRadius

number

props.style.borderRightColor

string

props.style.borderRightStyle

"solid" | "dashed"

props.style.borderRightWidth

number

props.style.borderStyle

"solid" | "dashed"

props.style.borderTopColor

string

props.style.borderTopLeftRadius

number

props.style.borderTopRightRadius

number

props.style.borderTopStyle

"solid" | "dashed"

props.style.borderTopWidth

number

props.style.borderWidth

number

props.style.bottom

number

props.style.boxShadow

string

props.style.display

"flex" | "none"

props.style.flexBasis

number

props.style.flexDirection

"row" | "row-reverse" | "column" | "column-reverse"

props.style.flexGrow

number

props.style.flexShrink

number

props.style.flexWrap

"nowrap" | "wrap" | "wrap-reverse"

props.style.gap

number

props.style.height

number

props.style.justifyContent

"flex-start" | "center" | "flex-end" | "space-between" | "space-around"

props.style.left

number

props.style.margin

number

props.style.marginBottom

number

props.style.marginLeft

number

props.style.marginRight

number

props.style.marginTop

number

props.style.maxHeight

number

props.style.maxWidth

number

props.style.minHeight

number

props.style.minWidth

number

props.style.objectFit

"none" | "contain" | "cover"

props.style.opacity

number

props.style.overflow

"visible" | "hidden"

props.style.padding

number

props.style.paddingBottom

number

props.style.paddingLeft

number

props.style.paddingRight

number

props.style.paddingTop

number

props.style.position

"relative" | "absolute"

props.style.right

number

props.style.top

number

props.style.width

number

children

ElementChildren<ElementType>

Returns

ElementType

---

createBoxChildren()

createBoxChildren(children?, key?): ElementChildren<ElementType>

Parameters

children?

{props: object;type: "Box" | "Image" | "Text"; }

children.props

object

children.type

"Box" | "Image" | "Text"

object[]

key?

string

Returns

ElementChildren<ElementType>

---

createElement()

createElement(el, key?): ElementType

Parameters

el

el.props

object

el.type

"Box" | "Image" | "Text"

key?

string

Returns

ElementType

---

createImage()

createImage(props): ElementType

Parameters

props

props.alt

string

props.height

number

props.key

string

props.src

string

props.width

number

Returns

ElementType

---

createText()

createText(props, children): ElementType

Parameters

props

props.children

string | number | boolean | {props: object;type: "Text"; } | (string | number | boolean | {props: object;type: "Text"; })[]

props.key

string

props.style

object

props.style.color

string

props.style.fontFamily

string

props.style.fontSize

number

props.style.fontStyle

"normal" | "italic"

props.style.fontWeight

"bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black"

props.style.letterSpacing

number

props.style.lineHeight

number

props.style.textAlign

"right" | "left" | "center" | "justify"

props.style.textDecoration

string

props.style.textOverflow

"clip" | "ellipsis"

props.style.textShadow

string

props.style.textTransform

"none" | "uppercase" | "lowercase" | "capitalize"

props.style.textWrap

"wrap" | "balance"

props.style.whiteSpace

"nowrap" | "normal" | "pre" | "pre-wrap" | "pre-line"

props.style.wordBreak

"normal" | "break-all" | "break-word" | "keep-all"

children

ElementChildren<ElementType>

Returns

ElementType

---

createTextChildren()

createTextChildren(children?): ElementChildren<ElementType>

Parameters

children?

string

number

boolean

{props: object;type: "Text"; }

children.props

object

children.type

"Text"

(string | number | boolean | {props: object;type: "Text"; })[]

Returns

ElementChildren<ElementType>

---

render()

render(props): ElementType

Parameters

props

RenderProps

Returns

ElementType

---

renderInteractions()

renderInteractions(props): ElementType

Parameters

props

RenderInteractionsProps

Returns

ElementType

---

renderTile()

renderTile(props): ElementType

Parameters

props

RenderTileProps<ElementType>

Returns

ElementType

Type Aliases

ActionHandler()

ActionHandler: (action, submitValue?) => Promise<void>

Parameters

action

ActionV0

submitValue?

SubmitValueV0

Returns

Promise<void>

---

BoxPropsV0

BoxPropsV0: FromSchema<typeof boxPropsV0>

---

ElementChild<ElementType>

ElementChild<ElementType>: null | ValueV0 | ElementType

Type Parameters

• ElementType

---

ElementChildren<ElementType>

ElementChildren<ElementType>: ElementChild<ElementType> | ElementChild<ElementType>[]

Type Parameters

• ElementType

---

ImagePropsV0

ImagePropsV0: FromSchema<typeof imagePropsV0>

---

RenderInteractionsHandler()<ElementType>

RenderInteractionsHandler<ElementType>: (props) => ElementType

Type Parameters

• ElementType

Parameters

props

RenderInteractionsProps

Returns

ElementType

---

RenderInteractionsProps

RenderInteractionsProps: TileInteractiveV0 & object

Type declaration

handleAction?

optional handleAction: ActionHandler

---

RenderProps

RenderProps: object

Type declaration

handleAction?

optional handleAction: ActionHandler

tile

tile: TileV0

---

RenderTileProps<ElementType>

RenderTileProps<ElementType>: object

Type Parameters

• ElementType

Type declaration

children

children: ElementChildren<ElementType>

handleAction?

optional handleAction: ActionHandler

tile

tile: TileV0

---

TextPropsV0

TextPropsV0: FromSchema<typeof textPropsV0>