유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Highlight Text in React | Perfect for Blogs & Articles

Cand Dev

2025. 8. 27.

0

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

Recommanded Videos