react-chat-ui - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #machine-learning #rust #macos #windows #awesome #cli #kubernetes #awesome-list #security #openai #open-source

react-chat-ui

(★ 545)

🙊 A library of React components for building chat UI's.

파일 탐색기

최종 버전 다운로드 (.zip)

- FUNDING.yml
- settings.json
- bundle.js
- es5.js
- index.html
- index.js
- chatit-banner.png
- - index.tsx
  - interface.ts
  - README.md
  - styles.ts
- - index.tsx
  - interface.ts
  - README.md
  - styles.ts
- - index.tsx
  - README.md
  - styles.ts
- - index.tsx
- - index.ts
  - README.md
- index.ts
.babelrc
.gitignore
.npmignore
LICENSE
package.json
precompile.sh
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/brandonmowat/react-chat-ui

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-chat-ui

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn dev

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![react-chat-ui logo](https://i.imgur.com/YhPrFWw.png)

# 🙊 react-chat-ui

A library of React components for building chat UI's.

[![NPM](https://nodei.co/npm/react-chat-ui.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-chat-ui/)

## Sponsor

Sponsored by [Pusher Chatkit](https://pusher.com/chatkit?utm_source=github&utm_campaign=react-chat-ui-sponsorship):

<a href="https://pusher.com/chatkit?utm_source=github&utm_campaign=react-chat-ui-sponsorship">
    <img width="650" src="https://raw.githubusercontent.com/bookercodes/react-chat-ui/master/media/chatit-banner.png" alt="Pusher Chatkit"></a>

## Features

* Auto scroll to bottom
* SUPER easy to use
* Multiple user grouping (try it out in the demo)

Keep in mind that this project is still in the early stages of development. If you encounter a bug or have a feature request, please create an issue and/or tweet at me [here](http://twitter.com/brandonmowat).

## Installation

`npm install react-chat-ui --save`

## Basic Usage

```javascript
import { ChatFeed, Message } from 'react-chat-ui'

// Your code stuff...

render() {

return (

// Your JSX...

<ChatFeed
      messages={this.state.messages} // Array: list of message objects
      isTyping={this.state.is_typing} // Boolean: is the recipient typing
      hasInputField={false} // Boolean: use our input, or use your own
      showSenderName // show the name of the user who sent the message
      bubblesCentered={false} //Boolean should the bubbles be centered in the feed?
      // JSON: Custom bubble styles
      bubbleStyles={
        {
          text: {
            fontSize: 30
          },
          chatbubble: {
            borderRadius: 70,
            padding: 40
          }
        }
      }
    />

// Your JSX...

)

}
```

Make sure to keep a list of proper message objects in your class state.
Like so:

```javascript
//...
this.state = {
  messages: [
    new Message({
      id: 1,
      message: "I'm the recipient! (The person you're talking to)",
    }), // Gray bubble
    new Message({ id: 0, message: "I'm you -- the blue bubble!" }), // Blue bubble
  ],
  //...
};
//...
```

## API

* [ChatFeed](./src/ChatFeed)
* [Message](./src/Message)
* [ChatBubble](./src/ChatBubble)
* [BubbleGroup](./src/BubbleGroup)

## Contributing!¡1 🔧

Contributions are always welcomed and encouraged. If you don't want to write a feature request yourself, let ya boi know (either on [Twitter](http://twitter.com/brandonmowat) or by creating a Pull Request) and I'll get that shit coded right up.

## TODO

* documentation
* documentation
* documentation

## Development

```sh
yarn dev
```