See if someone is typing into an input or textarea.

yarn add use-is-typing

npm i use-is-typing --save

• See more examples ./storybook
• Try it at CodeSandbox

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useIsTyping } from 'use-is-typing';

const App = () => {
  const [isTyping, register] = useIsTyping();

  return (
    <div>
      <textarea ref={register} />
      <br />
      Typing? {isTyping ? '✅' : '❌'}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

export const MaterialUITextField = () => {
  const [isTyping, register] = useIsTyping();
  return (
    <div>
      <TextField label="Type something here" inputRef={register} />
      <Box mb={2} />
      <Typography variant="body1">
        Typing? {isTyping ? '✅' : '❌'}
      </Typography>
    </div>
  )
};

By default, the typing indicator is set to false after 1000ms, this can be changed:

const [isTyping, register] = useIsTyping({ timeout: 300 }); // timeout after 300ms

This project was bootstrapped with TSDX. See sections below for info on how to get it running.

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

TSDX scaffolds your new library inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run either example playground or storybook:

Run inside another terminal:

yarn storybook

This loads the stories from ./stories.

NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

Jest tests are set up to run with npm test or yarn test. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.