
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-chat-ui
Advanced tools
A library of React components for building chat UI's.
Sponsored by Pusher Chatkit:
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 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❤️
LYExBx4bwSpAju6YpMXBLBCYVDvWV6n8fz
0xf9bf1a68732b1314f28050addd3ed13f2a187d9d
npm run dev
FAQs
A library of React components for building chat UI's
The npm package react-chat-ui receives a total of 536 weekly downloads. As such, react-chat-ui popularity was classified as not popular.
We found that react-chat-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.