Highlight Text in React | Perfect for Blogs & Articles
- 소개: React, Tailwind CSS, Sets를 사용하는 프로젝트에 적용하기 좋은 텍스트 하이라이트 컴포넌트 소개 ✨
- 컴포넌트 사용법: Sets CN CLI를 통해 자동 설치하거나, 수동으로 컴포넌트 파일 생성 후 코드 복사-붙여넣기 🛠️
- 설치:
npm install motion 명령어를 통해 motion 설치 필요 ⚙️
- 기본 사용법:
<TextHighlighter> 컴포넌트로 감싸서 텍스트 강조, as prop으로 paragraph 변경 가능 📦
- 커스터마이징: 텍스트 하이라이터의 방향 (
direction prop: LTR, RTL) 및 스타일 (className prop) 변경 가능 🎨
- 뷰 옵션 사용: 텍스트가 뷰포트 내에 있을 때만 하이라이트 표시 (기본 설정) 👁️
- 컴포넌트 재사용: 기본 props를 가진 커스텀 컴포넌트 생성하여 재사용성 높임 (children props 활용) ♻️
- 장점: 간편한 설치, 다양한 커스터마이징 옵션, 재사용 가능한 컴포넌트 구조 🚀