컴포넌트
Toggle Emoji
누를 때마다 이모지 반응이 순환하며 팝인 전환되고, 토글 순간 컨테이너 내부로 한정된 방사형 파티클 버스트가 튀는 토글 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ToggleEmoji-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| reactions | EmojiReaction[] | [🙂,😍,🔥,🎉] | 순환할 이모지 반응 목록. 각 항목은 glyph(이모지)와 label(이름)을 가진다. |
| defaultIndex | number | 0 | 비제어 초기 반응 인덱스 (범위를 벗어나면 자동 클램프). |
| size | number | 56 | 이모지 픽셀 크기. 버튼/배지/파티클 크기가 이 값에 비례해 조정된다. |
| burst | boolean | true | 토글 시 방사형 파티클 버스트 표시 여부 (reduced-motion 시 자동 비활성). |
| onChange | (index: number, reaction: EmojiReaction) => void | undefined | 활성 반응이 바뀔 때 새 인덱스와 반응 객체를 전달하는 콜백. |
| className | string | "" | 버튼 루트에 추가할 CSS 클래스. |