react chat ui
0.4
A library of React components for building chat UI's.
Sponsored by Pusher Chatkit:
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.
npm install react-chat-ui --save
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:
//...this.state = {
messages: [new Message({ id: 1, message: "I'm the recipient! (The person you're talking to)",}), // Gray bubblenew Message({ id: 0, message: "I'm you -- the blue bubble!" }), // Blue bubble
],
//...};//...ChatFeed
Message
ChatBubble
BubbleGroup
Contributions are always welcomed and encouraged. If you don't want to write a feature request yourself, let ya boi know (either on Twitter or by creating a Pull Request) and I'll get that shit coded right up.
documentation
documentation
documentation
yarn dev
