iPhone 메시지 스타일의 채팅 컴포넌트 (React, TypeScript, Tailwind CSS)
npm install react-iphone-chatiPhone 메시지 스타일의 채팅 컴포넌트를 React와 TypeScript로 구현한 라이브러리입니다.
!alt text
- iPhone 메시지 UI와 유사한 깔끔한 디자인
- 사용자와 상대방 메시지를 구분하여 표시
- 자동 스크롤 기능
- Tailwind CSS 유틸리티 클래스를 활용한 스타일링
``bash`
npm install react-iphone-chat
또는
`bash`
yarn add react-iphone-chat
이 컴포넌트는 Tailwind CSS를 사용합니다.
사용하는 프로젝트에 Tailwind CSS가 사전에 설치 및 설정되어 있어야 합니다.
Tailwind CSS 설치 및 설정 방법은 Tailwind CSS 공식 문서를 참고하세요.
`tsx
import { useState } from "react"
import { Chat, Message } from "react-iphone-chat"
const App = () => {
const [messages, setMessages] = useState
{
id: "1",
content: "안녕하세요!",
timestamp: new Date().toISOString(),
type: "other",
},
])
const handleSendMessage = (msg: string) => {
const newMsg: Message = {
id: (messages.length + 1).toString(),
content: msg,
timestamp: new Date().toISOString(),
type: "user",
}
setMessages([...messages, newMsg])
}
return (
export default App
`
- messages: Message[]
채팅 메시지 배열입니다. 각 메시지는 다음의 인터페이스를 따릅니다:
`ts`
export interface Message {
id: string
content: string
timestamp: string
type: "other" | "user" // other: 상대방 메시지, false: 사용자가 보낸 메시지
}
- onSendMessage (선택): (message: string) => void
메시지 전송 시 호출되는 콜백 함수입니다.
- height (선택): string"500px"
채팅 컴포넌트의 높이를 지정합니다. (예: , "100%")
프로젝트를 빌드하려면 Rollup을 사용합니다.
`bash`
npm run build
자세한 빌드 설정은 rollup.config.js` 파일을 참고하세요.
MIT License