An npm package to wait for an element in the DOM to become available or for an attribute to change, with support for timeouts and customizable options
npm install element-waiterA utility package to wait for DOM elements and attribute changes, with support for various JavaScript frameworks and TypeScript.
``bash`
npm install element-waiter
Or
`bash`
yarn add element-waiter
`typescript
import { waitForElement } from 'element-waiter';
waitForElement(elementOrSelector, options)
.then((element) => {
if (element) {
// Do something with the element
}
})
.catch((error) => {
// Handle the error
});
`
#### Options
- timeout: Maximum time (in ms) to wait for the element. Default: 2500.root
- : Root element for querySelector. Default: document.attributes
- : Set to true to observe changes to the attribute values. Default: true.subtree
- : Set to true to observe changes to the element's descendants. Default: true.childList
- : Set to true to observe changes to the element's children. Default: true.throwOnTimeout
- : Set to true to throw an error if the element is not found within the timeout. Default: false.checkClientHeight
- : Set to true to wait for the element's clientHeight to be greater than 0, which can be useful to determine if the element is fully rendered rather than just existing in the DOM. Default: false.$3
`typescript
import { waitForAttributeChange } from 'element-waiter';
waitForAttributeChange(selector, attributeName, options)
.then((element) => {
if (element) {
// Do something with the element
}
})
.catch((error) => {
// Handle the error
});
`
This function first checks if the element exists before waiting for the specified attribute to change.
#### Options
- timeout: Maximum time (in ms) to wait for the attribute change. Default: 2500.root
- : Root element for querySelector. Default: document.throwOnTimeout
- : Set to true to throw an error if the attribute change is not detected within the timeout. Default: false.
Sure, I'll provide example implementations for both Vue and React.
Here's an example of using element-waiter in a Vue component:
`vue
I am the target element
`
Here's an example of using element-waiter in a React component:
`jsx
import React, { useRef, useState } from 'react';
import { waitForElement } from 'element-waiter';
function App() {
const [showElement, setShowElement] = useState(false);
const elementRef = useRef(null);
const toggleElement = async () => {
setShowElement(!showElement);
if (!showElement) {
try {
const element = await waitForElement(elementRef.current, {
checkClientHeight: true,
});
console.log('Element is rendered:', element);
} catch (error) {
console.error('Error:', error);
}
}
};
return (
export default App;
`
In both examples, we have a simple component with a button that toggles the visibility of a target element. When the element is shown, we use waitForElement` to wait for the element to be rendered.
MIT