Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3
useSendbirdStateContext
Copy link
The useSendbirdStateContext
component is a useState
hook pattern that lets you access the internal state of sendbirdProvider
. You can use the useSendbirdStateContext
component with selectors to implement various functionalities such as sending a user message. Refer to the example codes below.
import React, { useEffect, useState } from "react"; import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider"; import useSendbirdStateContext from "@sendbird/uikit-react/useSendbirdStateContext"; import { v4 as uuidv4 } from "uuid"; function CustomTypingIndicator(props) { const { currentChannelUrl } = props; const globalStore = useSendbirdStateContext(); const sdkInstance = sendbirdSelectors.getSdk(globalStore); const sendMessage = sendbirdSelectors.getSendUserMessage(globalStore); const [indicator, setIndicator] = useState({ show: false, name: null }); useEffect(() => { const uuid = uuidv4(); if (sdkInstance?.groupChannel?.addGroupChannelHandler && currentChannelUrl) { const channelHandlerConstructor = {}; channelHandlerConstructor.onMessageReceived = (channel, message) => { if (channel.url !== currentChannelUrl) { return; } setIndicator({ show: true, name: message.sender }); setTimeout(() => { setIndicator({ show: false, name: null }); }, 2000); }; const channelHandler = new GroupChannelHandler(channelHandlerConstructor); sdkInstance.groupChannel.addGroupChannelHandler(uuid, channelHandler); } return () => { if (sdkInstance?.groupChannel?.removeChannelHandler) { sdkInstance.groupChannel.removeChannelHandler(uuid); } }; }, [sdkInstance, currentChannelUrl]); return ( <div className="typing-indicator"> {indicator.show ? `${indicator.name} is typing` : null} <button onClick={() => { const params = new sdkInstance.UserMessageParams(); params.message = "Hello World"; sendMessage(channelUrl, params) .onPending((pendingMessage) => { setLastMessage(pendingMessage); alert('Message sent: pending', pendingMessage); return pendingMessage; }) .onSucceeded(message => { alert('Message sent: success', message); setLastMessage(message); console.warn(message); }) .catch(e => { console.warn(e); alert('Couldnt send message'); }); }} /> </div> ); } export default CustomTypingIndicator;