Package Exports

react-use-what-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-use-what-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`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!

react-use-what-input