https://github.com/webfuse-com/is-interactive
Versatile DOM element interactivity checks.
https://github.com/webfuse-com/is-interactive
is-interactive
Last synced: about 1 month ago
JSON representation
Versatile DOM element interactivity checks.
- Host: GitHub
- URL: https://github.com/webfuse-com/is-interactive
- Owner: webfuse-com
- Created: 2026-04-28T09:21:30.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-21T15:08:40.000Z (about 1 month ago)
- Last Synced: 2026-05-22T00:11:14.091Z (about 1 month ago)
- Topics: is-interactive
- Language: TypeScript
- Homepage:
- Size: 114 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Is Interactive?
Versatile DOM element interactivity checks.
``` console
npm install webfuse-com/is-interactive
```
### Example
``` js
import { checkInteractivity, filterInteractive } from "@webfuse-com/is-interactive";
// Check if an element is interactive:
const click = targetElement => {
const { isInteractive } = checkInteractivity(targetElement, {
invisible: false // disables invisible check
});
if(!isInteractive) return;
automation.click(button);
};
// Create a DOM snapshot (weakly corresponding to the GUI):
const surfaceDOMSnapshot = selector => {
return filterInteractive(document, {
offViewport: true
}).outerHTML;
};
```
### API
``` ts
// Toggle checks to perform (default: all enabled, except 'offViewport')
interface InteractivityChecks {
disconnected: boolean;
hidden: boolean;
inert: boolean;
disabled: boolean;
ariaHidden: boolean;
invisible: boolean;
unclickable: boolean;
collapsed: boolean;
clipped: boolean;
occluded: boolean;
offViewport: boolean;
}
/**
* Check whether an element is interactive.
*/
function checkInteractivity(element: Element, checks?: InteractivityChecks): {
isInteractive: boolean;
reason?:
| "disconnected"
| "hidden"
| "inert"
| "disabled"
| "ariaHidden"
| "invisible"
| "unclickable"
| "collapsed"
| "occluded"
| "offViewport";
}
/**
* Filter a DOM (sub)tree for interactive elements.
* Create a 'surface'-only DOM.
*/
function filterInteractive(dom: Document | Element, checks?: InteractivityChecks): Element
```
### DEMO
Open [demo/demo.html](./demo/demo.html) in a browser.
