
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
react-chat-ui
Advanced tools
A library of React components for building chat UI's.
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
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
],
//...
}
//...
npm run dev
FAQs
A library of React components for building chat UI's
The npm package react-chat-ui receives a total of 508 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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.