react-use-what-input/README.md

React hook for what-input integration

# `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][]:

```bash
npm install react-use-what-input
```

[npm][]:

```bash
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.

```js
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.

```js
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](https://github.com/kmck)

[yarn]: https://yarnpkg.com/lang/en/docs/install

[npm]: https://docs.npmjs.com/cli/install

[What Input]: https://github.com/ten1seven/what-input