Skip to content

⌨️ Keyboard typing detection made easy

License

Notifications You must be signed in to change notification settings

wsmd/typing-monitor

Repository files navigation

Build Status Coverage Status License

TypingMonitor

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
import TypingMonitor from '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:

new TypingMonitor.Static(options: Object)StaticTypingMonitor

Highlights

  • Meant to be used within an exiting input event handler (e.g. React's onInput).
  • TypingMonitor.Static is an alias of TypingMonitor
import TypingMonitor from 'typing-monitor';

const monitor = new TypingMonitor({/* options */});

// or

const monitor = new TypingMonitor.Static({/* 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
  1. listener: boolean → void: A callback function to be called every time the user started or stopped typing. Has one argument of type boolean indicating the typing status.

Example

import TypingMonitor from 'typing-monitor';

class MessageInput extends React.Component {
  componentDidMount() {
    const { discussion, user } = this.props;
    this.dbRef = db.ref(`/discussions/${discussion.id}/users/${user.id}`);
    // using TypingMonitor is the same as using TypingMonitor.Static
    this.typingMonitor = new TypingMonitor.Static({ wait: 1000 });
  }

  handleInput(e) {
    this.setState({ value: e.target.value });
    this.typingMonitor.listen((isTyping) => {
      this.dbRef.child('userTyping').set(isTyping);
    });
  }

  render() {
    return (
      <input onInput={this.handleInput} value={this.state.value} />
    );
  }
}

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
  1. listener (Function): A callback function to be called every time the user starts or stops typing. Has one argument of type boolean indicating the typing status.
Returns

unsubscribe (Function): A function that unsubscribes the listener

Example

import TypingMonitor from 'typing-monitor';

const globalMonitor = new TypingMonitor.Global({ wait: 1000 });

const unsubscribe = globalMonitor.listen((isTyping) => {
  console.log(isTyping ? 'user is typing' : 'user stopped typing');
});

unsubscribe(); // stop listening

new TypingMonitor.Listener(options)ListenerTypingMonitor

Highlights

  • Listens to the input event of the element passed to options.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
  1. listener (Function): A callback function to be called every time the user starts or stops typing. Has one argument of type boolean indicating the typing status.
Returns

unsubscribe (Function): A function that unsubscribes the listener

Example

import TypingMonitor from 'typing-monitor';

const listenerMonitor = new TypingMonitor.Listener({
  input: document.querySelector('input.MyFancyInput'),
  wait: 1000,
});

const unsubscribe = listenerMonitor.listen((isTyping) => {
  console.log(isTyping ? 'typing' : 'stopped');
});

unsubscribe(); // stop listening

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

License

MIT

Releases

No releases published

Packages

No packages published