https://github.com/brandonmowat/react-chat-ui
🙊 A library of React components for building chat UI's.
https://github.com/brandonmowat/react-chat-ui
chat messenger react react-components ui ui-components
Last synced: 6 months ago
JSON representation
🙊 A library of React components for building chat UI's.
- Host: GitHub
- URL: https://github.com/brandonmowat/react-chat-ui
- Owner: brandonmowat
- License: mit
- Created: 2016-08-22T14:11:11.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-08T00:43:58.000Z (about 2 years ago)
- Last Synced: 2025-03-18T02:57:34.516Z (7 months ago)
- Topics: chat, messenger, react, react-components, ui, ui-components
- Language: TypeScript
- Homepage: https://brandonmowat.github.io/react-chat-ui/demo/
- Size: 1.14 MB
- Stars: 543
- Watchers: 15
- Forks: 105
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🙊 react-chat-ui
A library of React components for building chat UI's.
[](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):
## 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...
// 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
```