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} // Boolean: 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 bubble
new Message({ id: 0, message: "I'm you -- the blue bubble!" }), // Blue bubble
],
//...
};
//...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.
If you'd like to support my development of react-chat-ui, you can donate via Litecoin or Etherium. But I also love when I get a shout-out on Twitter❤️
- LTC:
LYExBx4bwSpAju6YpMXBLBCYVDvWV6n8fz - ETH:
0xf9bf1a68732b1314f28050addd3ed13f2a187d9d
- documentation
- documentation
- documentation
npm run dev