قم ببناء واجهة مستخدم الدردشة الخاصة بك باستخدام مكونات React في بضع دقائق.
مجموعة Chat UI Kit من chatscope عبارة عن مجموعة أدوات واجهة مستخدم مفتوحة المصدر لتطوير تطبيقات الدردشة على الويب.
هل سئمت من المعاناة مع أشرطة التمرير اللاصقة، والمحتوى القابل للتحرير، والاستجابة، واختراقات CSS؟
هذه المجموعة لك! رؤية جميع الميزات.
توفر لك Chat UI Kit إمكانية تطوير واجهة المستخدم للدردشة بسرعة فائقة
فهرس العروض التوضيحية: https://chatscope.io/demo.
مكتبة المكونات
باستخدام الغزل:
yarn add @chatscope/chat-ui-kit-react
باستخدام npm:
npm install @chatscope/chat-ui-kit-react
الأنماط
باستخدام الغزل:
yarn add @chatscope/chat-ui-kit-styles
باستخدام npm:
npm install @chatscope/chat-ui-kit-styles
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css" ;
import {
MainContainer ,
ChatContainer ,
MessageList ,
Message ,
MessageInput ,
} from "@chatscope/chat-ui-kit-react" ;
< div style = { { position : "relative" , height : "500px" } } >
< MainContainer >
< ChatContainer >
< MessageList >
< Message
model = { {
message : "Hello my friend" ,
sentTime : "just now" ,
sender : "Joe" ,
} }
/>
</ MessageList >
< MessageInput placeholder = "Type message here" />
</ ChatContainer >
</ MainContainer >
</ div > ;
نعم! واجهة المستخدم الرسومية الأولى للدردشة جاهزة!
تم توثيق استخدام UMD في كتاب القصص الخاص بنا.
تحقق من كتاب القصص الودية الخاص بنا.
المكتبة مكتوبة بلغة Javascript، لكن أنواع Typescript متوفرة في الحزمة منذ الإصدار 1.9.3.
@chatscope/use-chat عبارة عن خطاف React لإدارة الحالة في تطبيقات الدردشة.
التحقق من ذلك ومعرفة مدى سهولة القيام بمنطق الدردشة بنفسك.
إذا قمت بإنشاء واجهة مستخدم رائعة للدردشة وتحب هذه المكتبة، يرجى هذا المستودع!
https://chatscope.io
معهد ماساتشوستس للتكنولوجيا