https://github.com/scaledrone/typing-indicator
Add typing indicator logic to your JavaScript chat app. Typing-indicator is framework agnostic and works with any JavaScript frameworks (or without).
https://github.com/scaledrone/typing-indicator
Last synced: 3 months ago
JSON representation
Add typing indicator logic to your JavaScript chat app. Typing-indicator is framework agnostic and works with any JavaScript frameworks (or without).
- Host: GitHub
- URL: https://github.com/scaledrone/typing-indicator
- Owner: ScaleDrone
- License: apache-2.0
- Created: 2023-08-12T10:39:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-12T17:09:24.000Z (almost 2 years ago)
- Last Synced: 2025-01-25T11:43:59.080Z (4 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Typing Indicator
Add typing indicator logic to your JavaScript chat app. Typing-indicator is framework agnostic and works with any JavaScript frameworks (or without).
## API
**Creating a new instance of TypingIndicator**
```javascript
import TypingIndicator from 'typing-indicator';
const typingIndicator = new TypingIndicator();
```
**Creating a new instance of TypingIndicator with custom listening time**
Set how fast typingIndicator reacts to typing changes. Default is 1500ms and it's not recommended to set it much lower than 500. Setting it lower will cause the indicator to be too reactive.
```javascript
import TypingIndicator from 'typing-indicator';
const typingIndicator = new TypingIndicator(1000);
```
**Send input changes to typingIndicator**
```javascript
typingIndicator.onChange(inputText);
```
**Listen to when typingIndicator detects typing and stopping typing**
```javascript
typingIndicator.listen(isTyping => {
console.log('Is typing?', isTyping);
});
```
## Example
### JavaScript
```javascript
import TypingIndicator from 'typing-indicator';
const typingIndicator = new TypingIndicator();
typingIndicator.listen(isTyping => {
console.log('Is typing?', isTyping);
});
HTMLInputElementObject.addEventListener('input', e => {
typingIndicator.onChange(e.value);
});
```
### React
```javascript
import TypingIndicator from 'typing-indicator';
class Input extends Component {
state = {
text: "",
typingIndicator: new TypingIndicator(),
}
componentDidMount() {
const {typingIndicator} = this.state;
const {onChangeTypingState} = this.props;
typingIndicator.listen(isTyping => onChangeTypingState(isTyping));
}
onChange(e) {
const {typingIndicator} = this.state;
const text = e.target.value;
typingIndicator.onChange(text);
this.setState({text});
}
onSubmit(e) {
const {onSendMessage} = this.props;
const {text} = this.state;
e.preventDefault();
this.setState({text: ""});
onSendMessage(text);
}
render() {
return (
this.onSubmit(e)}>
this.onChange(e)}
value={this.state.text}
type="text"
placeholder="Enter your message and press ENTER"
autoFocus
/>
Send
);
}
}
export default Input;
```