text.md

Text Module

Methods for applying text styles to React components.

const Info = View('p')
  .sans(16, {
    color: 'gray.800',
    weight: 500,
    leading: 1.6,
    tracking: '0.5px'
  })
  .element();

export const InfoSection = () => (
  <Info>
    This paragraph demonstrates responsive typography with hover effects.
  </Info>
);

• Options
  • align
  • case
  • color
  • cursor
  • decoration
  • ellipsis
  • family
  • leading
  • shadow
  • size
  • tracking
  • weight
  • wrap
• Shortcut Methods
  • text
  • sans
  • mono
  • serif
  • ellipsis
• Core Layout Function
  • text

Options

align

Text alignment within its container.

.text({ align: 'center' })
.text({ align: 'justify' })

Values: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'

case

Text casing transformation.

.text({ case: 'upper' })
.text({ case: 'capitalize' })

Values: 'upper' | 'lower' | 'capitalize' | 'normal'

color

Text color. Accepts any CSS color value.

.text({ color: 'blue' })
.text({ color: '#FF0000' })
.text({ color: 'rgba(0,0,0,0.5)' })

cursor

Mouse cursor style when hovering.

.text({ cursor: 'pointer' })

decoration

Text decoration lines.

.text({ decoration: 'underline' })
.text({ decoration: 'line-through' })

Values: 'none' | 'underline' | 'line-through' | 'overline'

ellipsis

Enable text truncation with ellipsis.

.text({ ellipsis: true })

family

Font family name or variable.

.text({ family: 'Arial' })
.text({ family: '$sans' })  // Use system variable

leading/lineHeight/height

Line height. All three props control the same CSS property.

.text({ leading: 1.5 })
.text({ lineHeight: '24px' })
.text({ height: '2em' })

shadow

Text shadow effects. Pass a number between 0-1 to control opacity of default shadow, or customize it fully:

.text({ shadow: 0.5 })  // Default shadow at 50% opacity
.text({ shadow: { x: 1, y: 1, blur: 2, color: 'blue' }})
.text({ shadow: { x: 2, y: 2 }}) // Default color with custom offset

Default shadow:

const defaultTextShadow: TextShadowOptions = {
  x: 1,
  y: 1,
  blur: 2,
  color: "rgba(0, 0, 0, 0.25)",
};

See also: Shadows.

size

Font size. Accepts number (px) or string with units.

.text({ size: 16 })      // 16px
.text({ size: '1.2rem' })
.text({ size: '2em' })

tracking

Letter spacing. Number (px) or string with units.

.text({ tracking: 0.5 })    // 0.5px
.text({ tracking: '0.1em' })

weight

Font weight. Accepts numbers (100-900) or keywords.

.text({ weight: 500 })
.text({ weight: 'bold' })

wrap/whiteSpace

Text wrapping behavior. Both props control white space handling.

.text({ wrap: 'nowrap' })
.text({ whiteSpace: 'pre' })

Values: 'wrap' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap'

Shortcut Methods

text(sizeOrOptions: string | number | TextOptions, options?: TextOptions)

Applies general text styles to an element.

Set font size to 16px:

.text(16)

Set font size to 18px and color to blue:

.text(18, { color: 'blue' })

Set multiple text properties:

.text(20, {
  weight: 'bold',
  color: 'red',
  align: 'center',
  family: 'sans-serif'
})

sans(sizeOrOptions: string | number | TextOptions, options?: TextOptions)

Applies sans-serif font styles.

Set sans-serif font with 16px size:

.sans(16)

Set sans-serif font with custom styles:

.sans(18, { weight: 'bold', color: 'blue' })

mono(sizeOrOptions: string | number | TextOptions, options?: TextOptions)

Applies monospace font styles.

Set monospace font with 14px size:

.mono(14)

Set monospace font with custom styles:

.mono({ size: 16, color: 'gray' })

serif(sizeOrOptions: string | number | TextOptions, options?: TextOptions)

Applies serif font styles.

Set serif font with 20px size:

.serif(20)

Set serif font with custom styles:

.serif(22, { weight: 'normal', align: 'center' })

ellipsis()

Applies ellipsis text overflow styles.

.ellipsis()

Core Layout Function

text(sizeOrOptions: string | number | TextOptions, options?: TextOptions)

The text function is the primary method for applying text styles.

TextOptions:

• color?: string
• size?: number | string
• family?: string
• weight?: number | string
• tracking?: number | string (letter-spacing)
• leading?: number | string (line-height)
• height?: number | string (line-height)
• lineHeight?: number | string
• align?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'
• case?: 'upper' | 'lower' | 'capitalize' | 'normal'
• wrap?: 'wrap' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap'
• whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap'
• cursor?: Cursor
• decoration?: 'none' | 'underline' | 'line-through' | 'overline'
• ellipsis?: boolean
• shadow?: TextShadowOptions | number

Apply multiple text styles:

.text({
  size: 16,
  color: 'darkblue',
  weight: 500,
  tracking: '0.5px',
  leading: 1.5,
  case: 'capitalize',
  align: 'center',
  decoration: 'underline',
  shadow: { offsetX: 1, offsetY: 1, blurRadius: 2, color: 'rgba(0,0,0,0.2)' }
})

Apply text styles with ellipsis:

.text({
  size: 14,
  ellipsis: true,
  color: 'gray'
})