
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
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 307 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.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.