Optionalparams: TypingParamsOptional parameters for event listeners and room status callbacks
A UseTypingResponse containing typing methods and current state
An Ably.ErrorInfo with ReactHookMustBeUsedWithinProvider When used outside of a ChatRoomProvider
import React, { useState } from 'react';
import { ChatClient, TypingSetEvent } from '@ably/chat';
import {
ChatClientProvider,
ChatRoomProvider,
useTyping
} from '@ably/chat/react';
// Component that handles typing indicators
const TypingIndicator = () => {
const { keystroke, stop, currentlyTyping } = useTyping({
listener: (typingEvent: TypingSetEvent) => {
console.log('Currently typing users:', Array.from(typingEvent.currentlyTyping));
},
});
const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
if (value.length > 0) {
try {
await keystroke();
console.log('Started typing');
} catch (error) {
console.error('Failed to send keystroke:', error);
}
} else {
try {
await stop();
console.log('Stopped typing');
} catch (error) {
console.error('Failed to stop typing:', error);
}
}
};
return (
<div>
<input
onChange={handleInputChange}
placeholder="Type a message..."
/>
<div>Currently typing: {Array.from(currentlyTyping).join(', ')}</div>
</div>
);
};
const chatClient: ChatClient; // existing ChatClient instance
const App = () => {
return (
<ChatClientProvider client={chatClient}>
<ChatRoomProvider name="room-id">
<TypingIndicator />
</ChatRoomProvider>
</ChatClientProvider>
);
};
export default App;
React hook that provides typing indicator functionality for chat rooms.
The hook automatically tracks the set of users currently typing and provides this as state that updates in real-time as users start and stop typing.
Note:
Roommust be attached to send and receive typing indicators, typically the ChatRoomProvider handles this automatically.