react-untabbable - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

index.cjs.js

@@ -173,5 +173,2 @@ 'use strict';
     var element = descriptor.element, hadTabindex = descriptor.hadTabindex, tabindex = descriptor.tabindex;
-    if (!element) {
-        return;
-    }
     if (!hadTabindex) {
@@ -186,3 +183,3 @@ element.removeAttribute('tabindex');
     if (options === void 0) { options = {}; }
-    var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.includeContainer, includeContainer = _b === void 0 ? true : _b;
+    var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.includeContainer, includeContainer = _b === void 0 ? false : _b;
     react.useEffect(function () {
@@ -189,0 +186,0 @@ if (disabled || !ref.current) {

index.js

@@ -169,5 +169,2 @@ import { useEffect, useRef, cloneElement } from 'react';
     var element = descriptor.element, hadTabindex = descriptor.hadTabindex, tabindex = descriptor.tabindex;
-    if (!element) {
-        return;
-    }
     if (!hadTabindex) {
@@ -182,3 +179,3 @@ element.removeAttribute('tabindex');
     if (options === void 0) { options = {}; }
-    var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.includeContainer, includeContainer = _b === void 0 ? true : _b;
+    var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.includeContainer, includeContainer = _b === void 0 ? false : _b;
     useEffect(function () {
@@ -185,0 +182,0 @@ if (disabled || !ref.current) {

package.json

 {
   "name": "react-untabbable",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "An extremely simple hook to make a container and all its children untabbable, but still focusable.",
@@ -9,4 +9,5 @@ "source": "src/index.ts",
     "build": "yarn run clean && rollup -c",
-    "test": "jest test",
-    "clean": "rm -f index.js index.cjs.js"
+    "clean": "rm -f index.js index.cjs.js",
+    "test": "jest test --coverage",
+    "test:watch": "jest test --watch"
   },
@@ -32,19 +33,22 @@ "repository": {
   "devDependencies": {
-    "@babel/preset-env": "^7.4.3",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/node": "^11.13.0",
-    "@types/react": "^16.8.10",
-    "babel-jest": "^24.7.1",
-    "jest": "^24.7.1",
-    "react": "16.8",
-    "react-testing-library": "^6.1.2",
-    "rollup": "^1.10.1",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.3.4",
-    "rollup-plugin-node-resolve": "^4.2.3",
-    "rollup-plugin-size-snapshot": "^0.8.0",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@testing-library/jest-dom": "^5.7.0",
+    "@testing-library/react": "^10.0.4",
+    "@types/node": "^13.13.5",
+    "@types/react": "^16.9.34",
+    "babel-jest": "^26.0.1",
+    "jest": "^26.0.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "rollup": "^2.8.2",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-size-snapshot": "^0.11.0",
     "rollup-plugin-typescript": "^1.0.1",
-    "tslib": "^1.9.3",
-    "typescript": "^3.4.1"
+    "tslib": "^1.11.2",
+    "typescript": "^3.8.3"
   },
@@ -51,0 +55,0 @@ "dependencies": {

README.md

@@ -11,4 +11,4 @@ [![npm](https://img.shields.io/npm/v/react-untabbable.svg?color=green&style=flat-square)](https://www.npmjs.com/package/react-untabbable)
 * First it obtains all the tabbable elements within a container using the package [tabbable](https://github.com/davidtheclark/tabbable)
-* A description of each element is saved with information of the tabindex
-* All elements have their tabindex set to __-1__
+* The current tabindex of each element is saved
+* All focusable elements have their tabindex set to __-1__
 * When needed, the previous value for the tabindex is restored to the respective elements
@@ -20,12 +20,15 @@
 ### Component
+
+| Prop            | Type      | Default | Description                     |
+|-----------------|-----------|---------|---------------------------------|
+| disabled        | `boolean` | `false` | Restores the tabbable behaviour |
+
 ```jsx
 import { Untabbable } from 'react-untabbable';
 
-const options = { disabled: false, includeContainer: true };
-
-<Untabbable { ...options } >
-    <div tabIndex="0" className="container">
-        <h1>All elements, including the container, are untabbable!</h1>
-        <button>Try to focus me with your keyboard!</button>
-        <button>You can still focus me though!</button>
+<Untabbable>
+    <button>Can't click me 😢</button>
+    You can mix react elements and simple nodes! (string, number, etc...)
+    <div>
+        <button>Can't click me as well 😭</button>
     </div>
@@ -36,2 +39,11 @@ </Untabbable>
 ### Hook
+
+| Parameter                | Type          | Default | Description                                       |
+|--------------------------|---------------|---------|---------------------------------------------------|
+| ref                      | `ref | ref[]` |         | One or more refs to DOM elements                  |
+| options?                 | `object`      | `{}`    |                                                   |
+| options.disabled         | `boolean`     | `false` | Restores the tabbable behaviour                   |
+| options.includeContainer | `boolean`     | `true`  | If the owner of the ref should also be untabbable |
+
+
 ```jsx
@@ -42,16 +54,14 @@ import React, { useRef } from 'react';
 const MyComponent = () => {
-    const containerRef = useRef();
+    const firstButtonRef = useRef();
+    const secondButtonRef = useRef();
 
-    const options = { disabled: false, includeContainer: true };
-
-    useUntabbable(containerRef, options);
-
     return (
-        <div ref={ containerRef } tabIndex="0" className="container">
-            <h1>All elements, including the container, are untabbable!</h1>
-            <button>Try to focus me with your keyboard!</button>
-            <button>You can still focus me though!</button>
+        <button ref={firstButtonRef}>
+            Can't click me 😢
+        </button>
+        <div>
+            <button ref={secondButtonRef}>Can't click me as well 😭</button>
         </div>
-    )
+    );
 };
 ```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82240

increased by398.21%

Number of package files

19

increased by280%

Lines of code

880

increased by152.15%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

64

increased by18.52%

Worsened metrics

Dev dependency count

20

increased by17.65%

No dependency changes