wait-for-the-element

A utility library that enables you to efficiently wait for an element to appear or disappear.

Usage

This module can be treated as an ES module:

import { waitForTheElement, waitForTheElementToDisappear } from 'wait-for-the-element';

This module can also be treated as a CommonJS module:

const { waitForTheElement, waitForTheElementToDisappear } = require('wait-for-the-element');

Waiting for an element

You can wait for an element to match a provided selector and retrieve it:

const element = await waitForTheElement('.target', {
  timeout : 5000
});

if (element === null)
{
  // After 5 seconds, a matching element still doesn't exist.
}

Important Note: If the selector matches multiple elements, only the first match will be returned.

Waiting for an element to disappear

You can wait for all elements to stop matching a provided selector:

const hidden = await waitForTheElementToDisappear('.target', {
  timeout : 5000
});

if (!hidden)
{
  // After 5 seconds, a matching element still exists.
}

Selectors

All functions accept CSS selectors supported by document.querySelector().

Options

All functions accept an optional settings object that control how elements are searched for:

| Options | Required | Default | Description | | --------- | :------: | :--------: | ----------------------------------------------------- | | timeout | No | 2500 | The maximum amount of time (in milliseconds) to wait. | | scope | No | document | The root element to start searching from. |

Getting started

This module is available through the Node Package Manager (NPM):

npm install wait-for-the-element

Development

Building

You can build UMD and ESM versions of this module that are both ES5 compatible and minified:

npm run build

Testing

This module also has a robust test suite:

npm test

This includes a code quality check using ESLint. Please refer to the .eslintrc files to familiar yourself with the rules.

License

This project is released under the MIT license.