react-iphone-chat

iPhone 메시지 스타일의 채팅 컴포넌트를 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
`

API 문서

$3

- 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