Merge pull request #11 from wayfair-incubator/vpodk-is-enabled

Added isEnabled prop, updated README

README.md

@@ -30,20 +30,6 @@ Be sure you use latest stable version of `npm`:
 npm install npm@latest -g
 ```
 
-### Installation
-
-Clone the repo
-
-```sh
-git clone https://github.com/wayfair-incubator/react-focus-bounder.git
-```
-
-Install NPM packages
-
-```sh
-npm install
-```
-
 ## Usage
 
 ```bash
@@ -69,6 +55,7 @@ import FocusBounder from 'react-focus-bounder';
 
 - `firstElementIndex` - An optional index of the first focusable element. Default `0`.
 - `focusTimeoutDelay` - An optional timeout to wait for the element to be fully visible. Default `0`.
+- `isEnabled` - An optional property to enable or disable this component functionality. Default `true`.
 
 ## Roadmap
 

index.tsx

@@ -22,6 +22,7 @@ type FocusBounderProps = {
   children: React.ReactNode;
   firstElementIndex?: number;
   focusTimeoutDelay?: number;
+  isEnabled?: boolean;
 };
 
 /**
@@ -30,11 +31,13 @@ type FocusBounderProps = {
  * @param {!React.ReactNode} props.children Child nodes to be wrapped.
  * @param {number=} props.firstElementIndex An optional index of the first focusable element.
  * @param {number=} props.focusTimeoutDelay An optional timeout to wait for the element to be fully visible.
+ * @param {boolean=} props.isEnabled An optional property to enable or disable this component functionality.
  */
 const FocusBounder = ({
   children,
   firstElementIndex = 0,
   focusTimeoutDelay = 0,
+  isEnabled = true,
 }: FocusBounderProps) => {
   /**
    * A reference to the first of the two bounding elements.
@@ -50,7 +53,7 @@ const FocusBounder = ({
    */
   const setFocus = useCallback(
     (index: number) => {
-      if (focusBounder.current) {
+      if (isEnabled && focusBounder.current) {
         // Getting the container element containing bounders.
         const container = focusBounder.current.parentNode;
         // Getting all focusable elements in the boudered container.
@@ -70,7 +73,7 @@ const FocusBounder = ({
         }
       }
     },
-    [focusBounder, focusTimeoutDelay]
+    [isEnabled, focusBounder, focusTimeoutDelay]
   );
 
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-focus-bounder",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Focus looping component based on focus bounders.",
   "homepage": "https://github.com/wayfair-incubator/react-focus-bounder",
   "repository": "github:wayfair-incubator/react-focus-bounder",