diff --git a/README.md b/README.md index 2eacf35..0e9be40 100644 --- a/README.md +++ b/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 diff --git a/index.tsx b/index.tsx index 08047c9..355355c 100644 --- a/index.tsx +++ b/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] ); /** diff --git a/package-lock.json b/package-lock.json index df72864..eb5418b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "react-focus-bounder", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "1.0.0", + "version": "1.1.0", "license": "MIT", "dependencies": { "react": "^17.0.2", diff --git a/package.json b/package.json index d2bdb57..2ed596f 100644 --- a/package.json +++ b/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",