react-use-what-input

useWhatInput

This wraps the What Input library to make it easier to integrate directly into React apps, allowing you to tailor the behavior of your components to the input method that your visitors are currently using.

Installation

yarn:

npm install react-use-what-input

npm:

yarn add react-use-what-input

Usage

By default, the hook will listen for changes in input and intent so that your components can display or behave differently.

import useWhatInput from 'react-use-what-input';

const YourComponent = () => {
  const [currentInput, currentIntent] = useWhatInput();
  return (
    <dl>
      <dt>Input:</dt><dd>{currentInput}</dd>
      <dt>Intent:</dt><dd>{currentIntent}</dd>
    </dl>
  )
};

If you only need either input or intent, you can pass an argument. This is available to help avoid unnecessary re-renders, but in practice it's probably not that big of an optimization.

import useWhatInput from 'react-use-what-input';

const YourInputAwareComponent = () => {
  const currentInput = useWhatInput('input');
  return (
    <dl>
      <dt>Input:</dt><dd>{currentInput}</dd>
    </dl>
  )
};

const YourIntentAwareComponent = () => {
  const currentIntent = useWhatInput('intent');
  return (
    <dl>
      <dt>Intent:</dt><dd>{currentIntent}</dd>
    </dl>
  )
};

Note

What Input adds data- attributes to the document element. This library does not do anything to avoid the behavior. This isn't a good or band thing, just something to know!

License

ISC © Keith McKnight