Text Stable WINMACLNX

Renders text. The only component that can contain string literals.

Text auto-sizes to its content by default — you rarely need to set an explicit width. It wraps when the available space is constrained and expands to a single line when given unlimited room, matching the CSS default behavior.

Import

import { Text } from '@glyx-dev/react'

Basic usage

<Text style={{ fontSize: 16, color: '#F0F0F2' }}>Hello, world!</Text>

Mixed content (expressions + strings)

Text flattens all children to a single string before rendering, so mixing string literals and expressions works as expected:

<Text>{count} items</Text>
<Text>= {result}</Text>
<Text>Hello, {name}!</Text>

Nested text (inline styles)

Text components can be nested for inline styling:

<Text style={{ fontSize: 16 }}>
  Hello,{' '}
  <Text style={{ fontWeight: 700, color: '#8B5CF6' }}>Glyx</Text>
  !
</Text>

Props

Prop	Type	Default	Description
`style`	`TextStyle`	`{}`	Typography and layout styles
`numberOfLines`	`number`	`undefined`	Cap layout height to N lines and clip overflow
`ellipsizeMode`	`'tail' \| 'head' \| 'middle' \| 'clip'`	`'tail'`	Where to truncate

⚠️

selectable and onPress are not real Text props — Text has no selection or press handling of its own. For selectable text use SelectableText instead; for a tappable text element, wrap it in Pressable.

Style properties

<Text style={{
  fontSize: 24,
  fontWeight: '700',         // '100'–'900' or 'bold', 'normal'
  fontStyle: 'italic',
  fontFamily: 'JetBrains Mono',   // must be loaded via glyx.config.ts
  color: '#F0F0F2',
  lineHeight: 32,             // absolute px, not a multiplier
  letterSpacing: -0.5,
  textAlign: 'center',        // 'left' (default), 'right', 'center', 'justify'
  textDecorationLine: 'underline',
  textTransform: 'uppercase',
}} />

Fonts

⚠️

There is no fonts config field — bundling a custom font family isn't supported today. style.fontFamily only resolves to fonts the OS already has installed.

Glyx registers system fonts automatically — for example Segoe UI on Windows, plus the platform's emoji font. Common text and emoji render correctly with no configuration. style.fontFamily picks between whatever the OS provides; there's currently no way to ship a custom .ttf/.otf alongside your app and have Glyx load it.

Line clamping

<Text numberOfLines={2} ellipsizeMode="tail">
  This is a very long string that will be truncated after two lines with an
  ellipsis at the tail end of the text.
</Text>

Selectable text

Text itself has no selection support. Use SelectableText instead:

import { SelectableText } from '@glyx-dev/react'
 
<SelectableText style={{ fontFamily: 'monospace' }}>
  npx glyx-cli create my-app
</SelectableText>

measureText(text, fontSize, maxWidth?)

Measures how much space a string would occupy before rendering it. Useful for sizing containers, computing column widths in tables, or positioning overlays.

import { measureText } from '@glyx-dev/react'
 
const { width, height } = measureText('Hello, world!', 16)
const { width: w } = measureText('Long label…', 14, 200)  // wrap at 200px

Returns { width: number, height: number } in logical pixels. The measurement uses the same text shaper as the renderer, so results are accurate even for multi-line content.

View Pressable