useElementAvailable.ts

TLDR

This file, useElementAvailable.ts, contains a custom hook named useElementAvailable which is used to check if a list of elements with specified IDs are available in the DOM.

Methods

None

Classes

None

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {useEffect, useRef, useState} from 'react'

export default function useElementAvailable(
    elementIds: string[],
): boolean {
    const checkAvailableInterval = useRef<NodeJS.Timeout | null>(null)
    const [available, setAvailable] = useState(false)
    useEffect(() => {
        if (available) {
            if (checkAvailableInterval.current) {
                clearInterval(checkAvailableInterval.current)
                checkAvailableInterval.current = null
            }
            return
        } else if (checkAvailableInterval.current) {
            return
        }
        checkAvailableInterval.current = setInterval(() => {
            if (elementIds.every((x) => document.querySelector(x))) {
                setAvailable(true)
                if (checkAvailableInterval.current) {
                    clearInterval(checkAvailableInterval.current)
                    checkAvailableInterval.current = null
                }
            }
        }, 500)
    }, [])

    return available
}