brandonmowat / React Chat Ui
Licence: mit
🙊 A library of React components for building chat UI's.
Stars: ✭ 424
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Chat Ui
React Chat Elements
Reactjs chat elements chat UI, react chat components
Stars: ✭ 565 (+33.25%)
Mutual labels: chat, ui-components, react-components
Cordova Plugin Native Keyboard
🎹 Add a Slack / WhatsApp - style chat keyboard to your Cordova app!
Stars: ✭ 271 (-36.08%)
Mutual labels: chat, messenger
Messenger Ios Chat Swift Firestore
Messenger Clone - Real-time iOS Chat with Firebase Firestore written in Swift
Stars: ✭ 405 (-4.48%)
Mutual labels: chat, messenger
react-native-giphy
Integrate GIPHY into your React Native project (works with react-native-gifted-chat)
Stars: ✭ 25 (-94.1%)
Mutual labels: chat, messenger
NIM iOS UIKit
网易云信 iOS UI 组件,提供聊天界面,文本消息,图片消息,语音消息,视频消息,地理位置消息,自定义消息(阅后即焚)等消息示例。#推荐客户得比特币/京东卡,现在推荐使用网易云信,最低得0.02BTC或3000元京东卡/单,点击参与:https://yunxin.163.com/promotion/recommend
Stars: ✭ 1,371 (+223.35%)
Mutual labels: chat, ui-components
Deltachat Core Rust
Delta Chat Rust Core library, used by Android/iOS/desktop apps and bindings
Stars: ✭ 300 (-29.25%)
Mutual labels: chat, messenger
Chatlayout
ChatLayout is an alternative solution to MessageKit. It uses custom UICollectionViewLayout to provide you full control over the presentation as well as all the tools available in UICollectionView. It supports dynamic cells and supplementary view sizes.
Stars: ✭ 184 (-56.6%)
Mutual labels: chat, messenger
Falconmessenger
🌟🌟🌟🌟🌟 Falcon Messenger is a Fast and Beautiful cloud-based messaging app. With iOS and IPadOS Support. Available on the App Store.
Stars: ✭ 310 (-26.89%)
Mutual labels: chat, messenger
Airframe React
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe
Stars: ✭ 3,659 (+762.97%)
Mutual labels: ui-components, react-components
clarity-react
React Components for VMware Clarity UI and Clarity Design
Stars: ✭ 33 (-92.22%)
Mutual labels: react-components, ui-components
light-ui
A lightly React UI library
Stars: ✭ 38 (-91.04%)
Mutual labels: react-components, ui-components
dashkit-ui
UI Components built on React.
Stars: ✭ 17 (-95.99%)
Mutual labels: react-components, ui-components
Chakra Ui
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Stars: ✭ 22,745 (+5264.39%)
Mutual labels: ui-components, react-components
Rimble Ui
React components that implement Rimble's Design System.
Stars: ✭ 357 (-15.8%)
Mutual labels: ui-components, react-components
React Messenger
Chat UX components built with React, inspired by Facebook Messenger
Stars: ✭ 167 (-60.61%)
Mutual labels: chat, messenger
Qiscus Sdk Android
Qiscus provide everything you need to power up your app with chats. And it's now made simple.
Stars: ✭ 175 (-58.73%)
Mutual labels: chat, messenger
🙊 react-chat-ui
A library of React components for building chat UI's.
Sponsor
Sponsored by Pusher Chatkit:
Features
- 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.
Installation
npm install react-chat-ui --save
Basic Usage
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
],
//...
};
//...
API
Contributing!¡1 🔧
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.
TODO
- documentation
- documentation
- documentation
Development
yarn dev
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].