aboutsummaryrefslogtreecommitdiffstats
path: root/src/utils/hooks/use-query-selector-all.tsx
blob: a3650ead438fa39f6334c0b74be84a5422d5bfd3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

/**
 * Use `document.querySelectorAll`.
 *
 * @param {string} query - A query.
 * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list.
 */
export const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
  query: string
): NodeListOf<HTMLElementTagNameMap[T]> | undefined => {
  const [elements, setElements] =
    useState<NodeListOf<HTMLElementTagNameMap[T]>>();
  const { asPath } = useRouter();

  useEffect(() => {
    setElements(document.querySelectorAll(query));
  }, [asPath, query]);

  return elements;
};