---
name: "RichText"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "RichText - Rich text"
---

## RichText

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

### Description

Rich text component for rendering rich text content.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `nodes` | `string \| RichTextNode[]` | No | - | Node list (array of element/text nodes) or an HTML string |
| `onSelect` | `(event: RichTextSelectEvent) => void` | No | - | Triggered when a tag inside the rich text is clicked |

### Referenced Types

##### `interface` RichTextNode

| Property | Type | Description |
| --- | --- | --- |
| `name` | `string` | Tag name |
| `attrs` | `Record<string, string>` | Node attributes |
| `children` | `RichTextNode[]` | Child node list |

##### `interface` RichTextSelectEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `RichTextSelectDetail` | Event data |

##### `interface` RichTextSelectDetail

| Property | Type | Description |
| --- | --- | --- |
| `name` | `string` | Tag name |
| `attrs` | `Record<string, string>` | Tag attributes |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

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

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <RichText
        nodes='<div><h2 style="color: #333;">Title</h2><p style="color: #666; line-height: 1.6;">This is a piece of rich text content</p></div>'
      />
    </View>
  );
}
```

#### HTML String format

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

export default function Demo() {
  const htmlString = `
    <div style="padding: 10px;">
      <h1 style="color: #007aff; margin-bottom: 10px;">Welcome to RichText</h1>
      <p style="color: #333; line-height: 1.8;">
        Life is <i>like</i> a box of <b style="color: red;">chocolates</b>.
      </p>
      <p style="color: #666; margin-top: 10px;">
        You never know what you are gonna get.
      </p>
    </div>
  `;

  return (
    <View style={{ padding: 20 }}>
      <RichText nodes={htmlString} />
    </View>
  );
}
```

#### Text node list format

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

export default function Demo() {
  const nodes = [
    { type: 'text' as const, text: 'This is the first paragraph.' },
    { type: 'text' as const, text: 'This is the second paragraph, supports HTML entities such as &amp;.' },
  ];

  return (
    <View style={{ padding: 20 }}>
      <RichText nodes={nodes} />
    </View>
  );
}
```

#### Tag click event

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

export default function Demo() {
  const html = `
    <div style="padding: 10px;">
      <p>Click the link text below to see console output:</p>
      <a style="color: #007aff; text-decoration: underline;">Clickable link</a>
    </div>
  `;

  return (
    <View style={{ padding: 20 }}>
      <RichText
        nodes={html}
        onSelect={(e) => console.log('Tag clicked:', e.detail.name, e.detail.attrs)}
      />
    </View>
  );
}
```


### Trusted HTML Nodes and Attributes

`class` and `style` attributes are globally supported; **`id` attribute is not supported**.

| Node       | Attributes                      |
| :--------- | ------------------------------- |
| a          |                                 |
| abbr       |                                 |
| address    |                                 |
| article    |                                 |
| aside      |                                 |
| b          |                                 |
| bdi        |                                 |
| bdo        | dir                             |
| big        |                                 |
| blockquote |                                 |
| br         |                                 |
| caption    |                                 |
| center     |                                 |
| cite       |                                 |
| code       |                                 |
| col        | span, width                     |
| colgroup   | span, width                     |
| dd         |                                 |
| del        |                                 |
| div        |                                 |
| dl         |                                 |
| dt         |                                 |
| em         |                                 |
| fieldset   |                                 |
| font       |                                 |
| footer     |                                 |
| h1         |                                 |
| h2         |                                 |
| h3         |                                 |
| h4         |                                 |
| h5         |                                 |
| h6         |                                 |
| header     |                                 |
| hr         |                                 |
| i          |                                 |
| img        | alt, src, height, width         |
| ins        |                                 |
| label      |                                 |
| legend     |                                 |
| li         |                                 |
| mark       |                                 |
| nav        |                                 |
| ol         | start, type                     |
| p          |                                 |
| pre        |                                 |
| q          |                                 |
| rt         |                                 |
| ruby       |                                 |
| s          |                                 |
| section    |                                 |
| small      |                                 |
| span       |                                 |
| strong     |                                 |
| sub        |                                 |
| sup        |                                 |
| table      | width                           |
| tbody      |                                 |
| td         | colspan, height, rowspan, width |
| tfoot      |                                 |
| th         | colspan, height, rowspan, width |
| thead      |                                 |
| tr         | colspan, height, rowspan, width |
| tt         |                                 |
| u          |                                 |
| ul         |                                 |
| iframe     |                                 |
| pre        |                                 |