Keyboard typing detection made easy.
Why?
TypingMonitor
is a keyboard-input detection library for the web.
It helps you detect when a user starts or stops typing inside your app. One of the most common use cases of this library is detecting input/keyboard activity in messaging and chat-based applications.
Installation
To install TypingMonitor
as a CommonJS module via a package manager:
# using npm npm install --save typing-monitor # using yarn yarn add typing-monitor
If you are not using a package manager or a module bundler, you can access the pre-compiled production and development UMD builds from here.
You can include the build file in a script tag on your page. The UMD builds make TypingMonitor
available as a window.TypingMonitor
global variable.
API
TypingMonitor
offers 3 different interfaces to handle different scenarios:
TypingMonitor.Static → StaticTypingMonitor
TypingMonitor.Global → GlobalTypingMonitor
TypingMonitor.Listener → ListenerTypingMonitor
new TypingMonitor.Static(options: Object)
→ StaticTypingMonitor
Highlights
- Meant to be used within an exiting
input
event handler (e.g.React
'sonInput
). TypingMonitor.Static
is an alias ofTypingMonitor
; const monitor = /* options */; // or const monitor = /* options */;
Options
wait
(Number): duration, in milliseconds, between each call to determine if the user has stopped typing.
Instance Methods
monitor.listen(listener: boolean → void)
Used to detect whether or not the user is typing.
Arguments
listener: boolean → void
: A callback function to be called every time the user started or stopped typing. Has one argument of typeboolean
indicating the typing status.
Example
; Component { const discussion user = thisprops; thisdbRef = db; // using TypingMonitor is the same as using TypingMonitor.Static thistypingMonitor = wait: 1000 ; } { this; thistypingMonitor; } { return <input onInput=thishandleInput value=thisstatevalue /> ; }
new TypingMonitor.Global(options)
→ GlobalTypingMonitor
Highlights
- Listens to the
input
event on the global/window. - New instances of
GlobalTypingMonitor
references a singleton. - Every
monitor#listen
registers a new listener. - Each
monitor#listen
returns a function to unsubscribe the listener.
Options
wait
(Number): duration, in milliseconds, between each input change to determine if the user stopped typing.
Instance Methods
monitor.listen(listener: boolean → void): unsubscribe
Used to detect whether or not the user is typing.
Arguments
listener
(Function): A callback function to be called every time the user starts or stops typing. Has one argument of typeboolean
indicating the typing status.
Returns
unsubscribe
(Function): A function that unsubscribes the listener
Example
; const globalMonitor = wait: 1000 ; const unsubscribe = globalMonitor; ; // stop listening
new TypingMonitor.Listener(options)
→ ListenerTypingMonitor
Highlights
- Listens to the
input
event of the element passed tooptions.input
- Works only on
<input />
and<textarea />
- Every
monitor#listen
registers a new listener
Options
wait
(Number): duration, in milliseconds, between each input change to determine if the user stopped typing.input: HTMLInputElement | HTMLTextAreaElement
.
Instance Methods
monitor.listen(listener: boolean → void): unsubscribe
Used to detect whether or not the user is typing.
Arguments
listener
(Function): A callback function to be called every time the user starts or stops typing. Has one argument of typeboolean
indicating the typing status.
Returns
unsubscribe
(Function): A function that unsubscribes the listener
Example
; const listenerMonitor = input: document wait: 1000; const unsubscribe = listenerMonitor; ; // stop listening
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
License
MIT