src/utils/hooks/use-code-blocks-theme.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { usePrismTheme } from '@utils/providers/prism-theme';
import { useRouter } from 'next/router';
import { RefObject, useEffect, useState } from 'react';
import useIsMounted from './use-is-mounted';

const useCodeBlocksTheme = (el: RefObject<HTMLDivElement>) => {
  const [preElements, setPreElements] = useState<NodeListOf<HTMLPreElement>>();
  const isMounted = useIsMounted(el);
  const { setCodeBlocks } = usePrismTheme();
  const { asPath } = useRouter();

  useEffect(() => {
    const result = document.querySelectorAll<HTMLPreElement>('pre');
    setPreElements(result);
  }, [asPath]);

  useEffect(() => {
    isMounted && preElements && setCodeBlocks(preElements);
  }, [isMounted, preElements, setCodeBlocks]);
};

export default useCodeBlocksTheme;