React compatibility #233
Description
Describe the bug
I imported the plugin to react as a web component.
import React, { useEffect, useRef, useState } from "react";
import "../../../node_modules/vue-advanced-chat/dist/vue-advanced-chat.min";
import "./chat.css";
function Test() {
const [rooms, setRooms] = useState([
{
roomId: 1,
roomName: "Room 1",
avatar: "assets/imgs/people.png",
unreadCount: 4,
index: 3,
users: [
{
_id: 1234,
username: "John Doe",
avatar: "assets/imgs/doe.png",
status: {
state: "online",
lastChanged: "today, 14:30"
}
},
{
_id: 4321,
username: "John Snow",
avatar: "assets/imgs/snow.png",
status: {
state: "offline",
lastChanged: "14 July, 20:00"
}
}
],
}
]);
const [messages, setMessages] = useState([{}]);
function invokeCallback({ detail }) {
console.log(detail);
}
// hook to maintain chat component instance
const chatElm = useRef(null);
useEffect(() => {
if (chatElm.current) {
// Update the rooms property of the chat web component imperatively
chatElm.current.rooms = rooms;
chatElm.current.messages = messages;
chatElm.current.styles = styles;
chatElm.current.addEventListener("send-message", invokeCallback);
}
}, [rooms, messages]);
return (
<div className ="chat">
<vue-advanced-chat
current-user-id= { 4321 }
ref ={ chatElm }
show-send-icon = { true }
show-emojis = { true }
/>
</div>
);
}
export default Test;
After that I can not click the send icon. it is not enabled
