Rich Text
セマンティックな React 文書と通知コンテンツにトークンベースのタイポグラフィを適用します。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | document, notice | document |
| コンテンツ | セマンティックな React children | — |
TRRichText はセマンティックな見出し、段落、リスト、リンク、インラインコード、強調のタイポグラフィと間隔を管理します。raw HTML の受け取りやサニタイズは行いません。外部コンテンツをサニタイズして解析し、React ノードとして渡してください。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/rich-text.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRRichText } from '@tinyrack/ui/components/rich-text';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
API
TRRichTextProps は dangerouslySetInnerHTML を除く native div props を拡張し、React 19 の ref を転送して variant を追加します。コンポーネントは data-variant を持つ div をレンダリングします。長いコンテンツには document、コンパクトで muted な通知には notice を使用してください。外部 HTML はコンシューマー側の信頼境界であるため、React children に変換する前に必ずサニタイズしてください。