# when-dom-ready

> $(document).ready() for the 21st century

Latest version **1.2.12** (published 2017-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install when-dom-ready
pnpm add when-dom-ready
yarn add when-dom-ready
bun add when-dom-ready
```

## Health

**Score 28/100 (F)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.12 |
| Published | 2017-05-12 |
| First published | 2017-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/when-dom-ready) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 324 |
| Author | Luke Childs |
| Maintainers | lukechilds |
| Keywords | check, dom, loaded, ready, promise, async, asynchronous, pure |

## Links

- npm: https://www.npmjs.com/package/when-dom-ready
- Repository: https://github.com/lukechilds/when-dom-ready
- Issues: https://github.com/lukechilds/when-dom-ready/issues
- npm.io page: https://npm.io/package/when-dom-ready

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.2.12 (latest) — 2017-05-12
- 1.2.11 — 2017-03-19
- 1.2.10 — 2017-03-07
- 1.2.9 — 2017-03-07
- 1.2.8 — 2017-03-07
- 1.2.7 — 2017-03-07
- 1.2.6 — 2017-02-07
- 1.2.5 — 2017-02-01
- 1.2.4 — 2017-01-29
- 1.2.3 — 2017-01-24
- 1.2.2 — 2017-01-17
- 1.2.1 — 2017-01-17
- 1.2.0 — 2017-01-17
- 1.1.0 — 2017-01-16
- 1.0.1 — 2017-01-16
- … 1 more at https://npm.io/package/when-dom-ready/versions

## README

# when-dom-ready

> $(document).ready() for the 21st century

[![Build Status](https://travis-ci.org/lukechilds/when-dom-ready.svg?branch=master)](https://travis-ci.org/lukechilds/when-dom-ready)
[![Coverage Status](https://coveralls.io/repos/github/lukechilds/when-dom-ready/badge.svg?branch=master)](https://coveralls.io/github/lukechilds/when-dom-ready?branch=master)
[![npm](https://img.shields.io/npm/v/when-dom-ready.svg)](https://www.npmjs.com/package/when-dom-ready)

Returns a Promise for cleaner usage, provides a Promise chain helper function and can also be used as a pure function. The Promise will resolve instantly if the DOM is already ready.

## Browser Compatibility

- IE9+ (requires Promise polyfill)
- Edge *
- Firefox 29+
- Safari 8+
- Chrome 33+
- Opera 23+

## Install

```shell
npm install --save when-dom-ready
```

or for quick testing:

```html
<script src="https://unpkg.com/when-dom-ready"></script>
```

## Usage

```js
import whenDomReady from 'when-dom-ready';

whenDomReady().then(() => console.log('DOM is ready yo!'));
```

You can still use callbacks if you want to:

```js
whenDomReady(() => console.log('DOM is ready yo!'));
```

## Promise chain helper

There is also a little helper function, `whenDomReady.resume()`, that pauses the execution of a Promise chain and then resumes it with the last value once the DOM is ready.

This allows you to specify complex async control flow in simple readable code:

```js
fetch('/my-badass-api.json')
  .then(getSomeProcessingDoneWhileWaitingForDom)
  .then(whenDomReady.resume())
  .then(injectDataIntoDom);
```

## Pure usage

You can make the function pure by passing in a `document` object. This is really [useful for tests](https://github.com/lukechilds/when-dom-ready/blob/master/test/unit.js) and mocking environments.

For example this works in Node.js:

```js
const Window = require('window');
const whenDomReady = require('when-dom-ready');

const { document } = new Window();

whenDomReady(document).then(() => console.log('DOM is ready yo!'));
```

Again, you can use the callback version as a pure function too:

```js
whenDomReady(() => console.log('DOM is ready yo!'), document);
```

And of course the helper:

```js
//...
  .then(whenDomReady.resume(document))
```

## License

MIT © Luke Childs

---
_Source: https://npm.io/package/when-dom-ready · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._