Rich Text
시맨틱 React 문서와 안내 콘텐츠에 토큰 기반 타이포그래피를 적용해요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | document, notice | document |
| 콘텐츠 | 시맨틱 React children | — |
TRRichText는 시맨틱 제목, 문단, 목록, 링크, 인라인 코드, 강조의 타이포그래피와 간격을 관리해요. 원시 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 prop을 확장하고 React 19 ref를 전달하며 variant를 추가해요. 컴포넌트는 data-variant가 있는 div를 렌더링해요. 긴 콘텐츠에는 document, 조밀한 muted 안내에는 notice를 사용하세요. 외부 HTML은 소비자의 신뢰 경계이므로 React children으로 변환하기 전에 반드시 정제해야 해요.