---
name: "Text"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Text - Text content"
---

## Text

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Text component for displaying text.

### Props

| Property | Type | Required | Default | Deprecated | Description |
| --- | --- | --- | --- | --- | --- |
| `userSelect` | `boolean` | No | `false` | - | Whether the text is selectable |
| `selectable` | `boolean` | No | - | 是: Use userSelect instead | Whether the text is selectable |

### Examples

#### Basic usage

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>This is a regular text</Text>
    </View>
  );
}
```

#### Selectable text

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Text userSelect style={{ fontSize: 16, color: '#007aff', lineHeight: '24px' }}>
        This text has userSelect enabled; long-press to select and copy.
      </Text>
      <Text style={{ fontSize: 16, marginTop: 12, color: '#999' }}>
        This text does not have userSelect set and cannot be selected.
      </Text>
    </View>
  );
}
```