要素出現まで取得を待つ系で便利なnpmパッケージ
動的に生成される特定の要素を選択する際に便利そうなnpmパッケージのピックアップです。
element-ready
個人的によく利用しています。これと言った理由はないのですがメンテナンスがされていて、且つ過不足もないので自作するまででもない時に使うことが多いです。
npm: https://www.npmjs.com/package/element-ready
ライセンス:MIT
npm i element-ready
import elementReady from 'element-ready'
;(async () => {
const element = await elementReady('#hoge', {
timeout: 2500,
stopOnDomReady: false,
})
// init
if (element) {
console.log(element)
} else {
// some code..
}
})()
デフォルトではDOMContentLoaded event後に自動でチェックをストップしてしまうので、オプションでstopOnDomReady
をfalse
にしてあげるとload eventに関係なくチェックを続けてくれます。
wait-for-element.js
暫くメンテナンスがされていないですがシンプルで使えそうです。ただ私のとあるプロジェクトの環境だとwebpackでprodビルドしちゃうと動かなくなる原因が掴めずで、採用は見送った事があります。使用する際は開発環境毎に適切に動くか確認は必要そうです。
npm: https://www.npmjs.com/package/wait-for-element
ライセンス:MIT
npm i wait-for-element
import waitForElement from 'wait-for-element'
waitForElement('#hoge', 2500)
.then((element) => {
console.log(element)
})
.catch(console.error.bind(console))
waitForSelector
実務で採用したことはありませんが、対象の要素を配列で複数渡せたり、複数渡した際に一番早く出現した要素のみを返してくれたりするので割と便利に使えそうな雰囲気です。
npm: https://www.npmjs.com/package/waitforselector
ライセンス:MIT
npm i waitforselector
import waitForSelector from 'waitforselector'
waitForSelector('#hoge', (element) => {
console.log(element)
},
{ timeout: 2500 }
)
wait-element
出現だけでなく、逆の消滅する要素の待機にも対応しているので、ある要素が消えた時に◯◯という実装を行いたい時には便利そうです。cancelメソッドもあったりします。
npm: https://www.npmjs.com/package/@1natsu/wait-element
ライセンス:MIT
npm i @1natsu/wait-element
import { waitDisappearElement, waitElement } from '@1natsu/wait-element'
// waitElement
;(async () => {
const element = await waitElement('#hoge', { timeout: 2500 }).catch(
(error) => console.log(error)
)
console.log(element)
})()
// waitDisappearElement
;(async () => {
const element = await waitDisappearElement('#hoge')
console.log(element)
})()