🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
Sign In

react-focus-onkeydown

Package Overview
Dependencies
Maintainers
2
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-focus-onkeydown - npm Package Compare versions

Comparing version
4.1.0
 to
5.0.0
+32
-38
package.json
{
"name": "react-focus-onkeydown",
"version": "4.1.0",
"version": "5.0.0",
"description": "React hook for getting focus of a component when a key is pressed anywhere in the page",
"main": "dist/index.cjs",
"module": "dist/index.js",
"type": "module",
"engines": {
"node": ">=12.2"
"node": ">=14.0.0"
},
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
}
".": "./index.js",
"./package.json": "./package.json"
},

@@ -20,5 +16,3 @@ "scripts": {

"test": "karma start karma.conf.cjs --single-run --no-auto-watch",
"tdd": "karma start karma.conf.cjs",
"build": "rollup -c",
"prepare": "npm run build"
"tdd": "karma start karma.conf.cjs"
},

@@ -43,35 +37,35 @@ "repository": {

"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-replace": "^3.0.0",
"@babel/core": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^4.0.0",
"babel-plugin-istanbul": "^6.1.1",
"chai": "^4.3.4",
"chai": "^4.3.6",
"coveralls": "^3.1.1",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-mocha": "^9.0.0",
"eslint-plugin-react": "^7.26.1",
"karma": "^6.3.7",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.3",
"eslint": "^8.16.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-mocha": "^10.0.5",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-unicorn": "^42.0.0",
"karma": "^6.3.20",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage": "^2.2.0",
"karma-coveralls": "^2.1.0",
"karma-firefox-launcher": "^2.1.2",
"karma-mocha": "^2.0.1",
"karma-rollup-preprocessor": "^7.0.7",
"karma-rollup-preprocessor": "^7.0.8",
"karma-sourcemap-loader": "^0.3.8",
"karma-spec-reporter": "0.0.32",
"mocha": "^9.1.3",
"prop-types": "^15.7.2",
"puppeteer": "^11.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rollup": "^2.59.0",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^12.0.0"
"karma-spec-reporter": "0.0.34",
"mocha": "^10.0.0",
"prop-types": "^15.8.1",
"puppeteer": "^14.1.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"rollup": "^2.75.3",
"sinon": "^14.0.0"
},

@@ -78,0 +72,0 @@ "peerDependencies": {

+3
-11
README.md

@@ -6,4 +6,2 @@ # react-focus-onkeydown

[![Coverage Status][coveralls-badge]][coveralls]
[![Dependency Status][dependency-status-badge]][dependency-status]
[![devDependency Status][dev-dependency-status-badge]][dev-dependency-status]

@@ -38,3 +36,3 @@ > React hook for getting focus of a component when a key is pressed anywhere in the page

const () => (
const () => {
const ref = useRef(null);

@@ -44,4 +42,4 @@ useFocusOnKeyDown(ref);

// Typing any key will trigger a focus on the input below
<input ref={ref} />
)
return <input ref={ref} />;
}
```

@@ -75,7 +73,1 @@

[coveralls]: https://coveralls.io/r/dotcore64/react-focus-onkeydown
[dependency-status-badge]: https://david-dm.org/dotcore64/react-focus-onkeydown.svg?style=flat-square
[dependency-status]: https://david-dm.org/dotcore64/react-focus-onkeydown
[dev-dependency-status-badge]: https://david-dm.org/dotcore64/react-focus-onkeydown/dev-status.svg?style=flat-square
[dev-dependency-status]: https://david-dm.org/dotcore64/react-focus-onkeydown#info=devDependencies
-30
dist/index.cjs
'use strict';
var react = require('react');
var index = (function (ref) {
var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var windowKeyDown = function windowKeyDown(e) {
// Auto-focus the current input when a key is typed
if (!(e.ctrlKey || e.metaKey || e.altKey)) {
ref.current.focus();
}
};
react.useEffect(function () {
if (active) {
window.addEventListener('keydown', windowKeyDown);
} else {
window.removeEventListener('keydown', windowKeyDown);
}
return function () {
if (active) {
window.removeEventListener('keydown', windowKeyDown);
}
};
}, [active]);
});
module.exports = index;
-28
dist/index.js
import { useEffect } from 'react';
var index = (function (ref) {
var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var windowKeyDown = function windowKeyDown(e) {
// Auto-focus the current input when a key is typed
if (!(e.ctrlKey || e.metaKey || e.altKey)) {
ref.current.focus();
}
};
useEffect(function () {
if (active) {
window.addEventListener('keydown', windowKeyDown);
} else {
window.removeEventListener('keydown', windowKeyDown);
}
return function () {
if (active) {
window.removeEventListener('keydown', windowKeyDown);
}
};
}, [active]);
});
export { index as default };
-1
dist/index.umd.js
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactFocusOnKeyDown=n(e.React)}(this,(function(e){"use strict";return function(n){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],o=function(e){e.ctrlKey||e.metaKey||e.altKey||n.current.focus()};e.useEffect((function(){return t?window.addEventListener("keydown",o):window.removeEventListener("keydown",o),function(){t&&window.removeEventListener("keydown",o)}}),[t])}}));