SelectableText

User-selectable text with pointer-driven selection and Ctrl+C / Cmd+C copy. Default Text nodes are intentionally non-selectable (no overhead for labels and buttons).

import { SelectableText, SelectionArea } from '@glyx-dev/react'

Basic usage

<SelectableText fontSize={16} color="#E5E7EB">
  Copy me with Ctrl+C
</SelectableText>

Click to place a cursor. Click and drag to select a range. Press Ctrl+C (or Cmd+C on macOS) to copy the selected text to the clipboard.

Props

Prop	Type	Default	Description
`children`	`string`	—	Text content
`fontSize`	`number`	`16`	Font size in px
`color`	`string`	inherited	Text color
`textAlign`	`'left' \| 'center' \| 'right'`	`'left'`	Horizontal alignment
`numberOfLines`	`number`	—	Clamp to N lines
`selectable`	`boolean`	`true` (or from context)	Override the `SelectionArea` context for this element
`style`	`object`	—	Style for the outer container

Disabling selection

Per element

<SelectableText selectable={false}>
  This text cannot be selected
</SelectableText>

For a subtree (`SelectionArea`)

Wrap any subtree with <SelectionArea enabled={false}> to disable selection for all SelectableText nodes inside it. A per-element selectable={true} prop overrides the context and re-enables selection for that element.

import { SelectionArea, SelectableText } from '@glyx-dev/react'
 
// Kiosk / presentation mode — disable for the entire window
function App() {
  return (
    <SelectionArea enabled={false}>
      <MyScreen />
    </SelectionArea>
  )
}
 
// Disable a panel but keep another selectable
function TwoPanel() {
  return (
    <View style={{ flexDirection: 'row' }}>
      <SelectionArea enabled={false}>
        <ReadOnlyPane />
      </SelectionArea>
 
      {/* SelectableText outside SelectionArea is enabled by default */}
      <SelectableText>Copy this</SelectableText>
    </View>
  )
}
 
// Re-enable one element inside a disabled area
function Mixed() {
  return (
    <SelectionArea enabled={false}>
      <SelectableText>not selectable</SelectableText>
      <SelectableText selectable={true}>still selectable</SelectableText>
    </SelectionArea>
  )
}

In a document viewer

function ArticleView({ article }) {
  return (
    <ScrollView style={{ flex: 1, padding: 24 }}>
      <SelectableText fontSize={28} color="#111" style={{ marginBottom: 12 }}>
        {article.title}
      </SelectableText>
      <SelectableText fontSize={14} color="#555" style={{ marginBottom: 20 }}>
        {article.author} · {article.date}
      </SelectableText>
      <SelectableText fontSize={16} color="#222" style={{ lineHeight: 26 }}>
        {article.body}
      </SelectableText>
    </ScrollView>
  )
}

Compared to `Text`

Feature	`Text`	`SelectableText`
Rendering	native text node	View wrapper + Text
Pointer events	none	click + drag selection
Clipboard	no	Ctrl/Cmd+C
Overhead	zero	negligible (1 extra node)
Use case	labels, buttons, headings	articles, code, log output, chat messages

Notes

Selection highlight color is rgba(100, 120, 255, 0.47) — the same blue used by TextInput.
Multi-line selection is not yet supported; selection spans a single visual line.
textAlign: 'center' or 'right' affects rendering but hit-testing always measures from the left edge (V1 limitation).
For a full rich-text editor (cursor + keyboard navigation + editable), use TextInput instead.

Popover TextInput