https://github.com/dbish6/react-user-input-detection
A lightweight React hook dependency to effortlessly detect keyboard or mouse usage.
https://github.com/dbish6/react-user-input-detection
accessibility dependency detect detection hook javascript keyboard mouse npm npm-package react react-hook reactjs typescript user-input
Last synced: 10 months ago
JSON representation
A lightweight React hook dependency to effortlessly detect keyboard or mouse usage.
- Host: GitHub
- URL: https://github.com/dbish6/react-user-input-detection
- Owner: dBish6
- License: mit
- Created: 2024-03-22T04:00:35.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-25T23:27:20.000Z (almost 2 years ago)
- Last Synced: 2025-03-26T20:50:27.051Z (10 months ago)
- Topics: accessibility, dependency, detect, detection, hook, javascript, keyboard, mouse, npm, npm-package, react, react-hook, reactjs, typescript, user-input
- Language: TypeScript
- Homepage:
- Size: 130 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.txt
- License: LICENSE
Awesome Lists containing this project
README
# react-user-input-detection
A lightweight React hook for detecting the user's input method within a web application. This package provides a simple way to track whether a user is interacting via a keyboard or mouse, enhancing accessibility and the user experience of your application. The package also includes a context provider necessary for the hook's functionality. Regardless of whether the user begins with a keyboard and later transitions to a mouse, the hook dynamically detects these changes, recognizing the user's input method as mouse-based. This monitoring ensures accurate tracking of user interaction.
## Installation
```
$ npm i react-user-input-detection
```
## Explanation
To utilize the hook, you must set up the context provider. The hook provides `isKeyboardUser` and `isKeyboardUserRef`, so you have the option to choose the state version or the ref version. When using the useState version, you must tell the provider to be stateful by providing the `state prop` to the IsKeyboardUserProvider. Use the useState version when re-rendering or DOM manipulation is necessary for your particular use case and anything other than that use the useRef version.
### Provider
```
...
import { IsKeyboardUserProvider } from "react-user-input-detection";
ReactDOM.createRoot(document.getElementById("root")).render(
// Uses the useRef version.
);
```
```
...
import { IsKeyboardUserProvider } from "react-user-input-detection";
ReactDOM.createRoot(document.getElementById("root")).render(
// Uses the useState version.
);
```
### Hook
```
import { useIsKeyboardUser } from "react-user-input-detection";
function App() {
const { isKeyboardUserRef } = useIsKeyboardUser();
return (
isKeyboardUserRef.current ? console.log("keyboard") : console.log("mouse") // useRef version use case.
}
>
Keyboard detection!
);
}
export default App;
```
```
import { useIsKeyboardUser } from "react-user-input-detection";
function App() {
const { isKeyboardUser } = useIsKeyboardUser();
return
{isKeyboardUser ? "keyboard" : "mouse"}
; // useState version use case.
}
export default App;
```
## Contributing
Contributions are welcome! Keep in mind I'd like to keep the package bundle size as small as possible.
### To Get Started
- Fork this repository.
- Create a new branch.
- install the dependencies with `npm install`.
- Do a `npm run test` to see if you're all set.
- For the dev environment, `npm run dev` and there you go!
```
$ npm install
$ npm run test
$ npm run dev
```
## License
This project is licensed under the [MIT](https://github.com/dBish6/react-user-input-detection/blob/master/LICENSE) License.
## Support Me
If you find this package helpful consider buying me a coffee, your support helps me stay motivated!
